使用 React-Router-4 为子级包装应用程序路由答案

【问题标题】：Wrapping application routes for children with React-Router-4使用 React-Router-4 为子级包装应用程序路由
【发布时间】：2017-04-12 11:30:31
【问题描述】：

使用 react-router（版本 3）时，我能够创建嵌套路由，因为包装器组件接收了子组件。通过这种方式，我能够为根组件使用“全局”reducer，因为每个子组件都有自己的 reducer：

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

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

【问题讨论】：

标签： reactjs react-router react-redux redux-router

【解决方案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>

【讨论】：