IndexRoute相當於反應路由器V4

Question

<Router> 
 
    <div> 
 
    <Route exact path="/" component={App}/> 
 
    <Route exact path='/' component={Home}/> 
 
    <Route path="/Project" component={Project}/> 
 
    </div> 
 
</Router> 
 
)

家組件在應用組件是如何呈現爲一個孩子（另類「IndexRoute」）

Answer 1

最簡單的答案只是移動Home到渲染（）您的應用程序的方法，像這樣：

class App extends Component { 
    render() { 
     return (
      <Home /> 
     ); 
    } 
} 

然後，在你的路由在頂端，你可能只是有這樣的：

<Router> 
    <div> 
    <Route exact path="/" component={App}/> 
    <Route path="/Project" component={Project}/> 
    </div> 
</Router> 

但是，這完全取決於您想要做什麼。作爲兒童組件，App總是有Home嗎？否則，你可以窩在路由器內的內部組件，如下所示：

這將設置應用程序的props.children是您要使用的特定組件。這可能您的應用程序內使用，然後像這樣：

class App extends Component { 
    render() { 
     return (
      <MyHeaderComponent /> 
      {this.props.children} 
      <MyFooterComponent /> 
     ); 
    } 
} 

Answer 2

在下面的代碼導航到/將呈現App組件與Home作爲其子

<Route path="/" component={App}> 
    <IndexRoute component={Home}/> 
    <Route path="project" component={Project}/> 
</Route>