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

正如你所看到的-我的路由现在是“扁平的”，所以我不能真正使用根组件，因此需要为每个组件使用"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>