反應路由器V4子組件

Question

import React from 'react'; 
import { IndexRoute, Router, Route, hashHistory } from 'react-router'; 
import Home from './containers/Home'; 
import App from './containers/App'; 

export default (
    <Router history={hashHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
    </Route> 
    </Router> 
); 

---

import React, { Component } from 'react'; 
import {Background} from '../App/App.style' 


class App extends Component { 
    render() { 
    return (
     <div> 
     {this.props.children} 
     {console.log(this.props.children)} 
     </div> 
    ); 
    } 
} 

export default App; 

我想首頁組件作爲組件應用程序的 一個孩子，而不是使用IndexRoute什麼在routerV4
這些代碼有什麼選擇？

Answer 1

這就是react-router v4的工作原理。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
import App from '../App'; 

ReactDOM.render(
    <BrowserRouter> 
     <Switch> 
      <Route exact path="/" component={App} /> 
     </Switch> 
    </BrowserRouter> 
); 

那麼對於家庭，將其導入到App組件，並使其：

<Switch> 
    <Route path="/home" component={Home} /> 
    <Route path="/about" component={About} /> 
</Switch> 

：

import Home from './Home' 
export default class App extends Component { 
... 
    render(){ 
     <Home /> 
    } 
} 

如果YPU計劃App使用中有應用，也許Home和About內多個孩子

找到了this repo非常有幫助。