使用React-Router-4包裝兒童的應用程序路線

Question

當使用react-router（版本3）時，我可以創建嵌套路線，因爲包裝組件接收了子節點。 我能，這樣一來，使用「全球」減速根組件，因爲每個子組件有它自己的減速器：

<Provider store={store}> 
    <Router key={Math.random()} history={browserHistory}> 
     <Route path="/" component={App}> 
      <IndexRoute component={MainPage}/> 
      <Route path="mainPage" component={MainPage}/> 
      <Route path="secPage" component={SecPage}/> 
      <Route path="*" component={MainPage}/> 
     </Route> 
    </Router> 
</Provider> 

和根組件內：

render() { 
     return (
     <div className="app-wrapper"> 
      {this.props.children} 
     </div> 
    ); 
} 

我升級爲使用4.0版本的路由器：

<Provider store={store}> 
    <Router history={history}> 
     <div> 
      <Route exact path="/" component={MainPage}/> 
      <Route path="secPage" component={SecPage}/> 
      <Route path="mainPage" component={MainPage}/> 
     </div> 
    </Router> 
</Provider> 

而且你可以見式我的路線現在是「平的」，所以我真的不能用根組件，以及爲此需要使用「全球減速器「。

如何使用與以前相同的方法？或者至少有東西接近它？

Answer 1

剛剛發現了一個解決方案 - 包裹孩子的路線與根組件：

<Provider store={store}> 
    <Router history={history}> 
     <App> 
      <Route exact path="/" component={MainPage}/> 
      <Route path="mainPage" component={MainPage}/> 
      <Route path="secPage" component={SecPage}/> 
     </App> 
    </Router> 
</Provider>