Question

当使用react-router（版本3）时，我能够创建嵌套路由，因为包装器组件接收了子节点。通过这种方式，我能够使用＆＃34;全球＆＃34;根组件的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>

正如你所看到的 - 我的路线现在是＆＃34; Flat＆＃34;，所以我无法真正使用根组件，因此需要使用＆＃34; globalReducer＆＃34;对于每个组件。

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

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>

使用React-Router-4

1 个答案: