reactjs - 使用 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：

<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>

正如你所看到的——我的路由现在是“Flat”，所以我不能真正使用根组件，因此需要为每个组件使用“globalReducer”。

如何使用与以前相同的方法？或者至少是接近它的东西？

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>