我有一个关于使用react-router(与Redux结合)设置初始路由的问题.我已经设置了一些路由并基于我的Redux商店的状态,我需要始终将用户重定向到页面加载的某个路由. 我的路线目前的设置方式
我的路线目前的设置方式如下:
<Provider store={store}> <Router history={history}> <Route path="/" component={App} onEnter={redirectToInitialRoute}> <Route path="/send" component={OverviewPage} /> <Route path="/thanks" component={ConfirmPage} /> <Route path="/:categoryIdentifier" component={CategoryPage} /> </Route> </Router> </Provider>
我已将onEnter函数添加到我的根路由.我这样做了,因为我总是需要重定向页面加载,而不管用户进入应用程序的页面.我的onEnter功能的设置方式如下:
function redirectToInitialRoute (nextState, replace) { if (condition) { replace('/send'); } else if (anotherCondition) { replace('/thanks'); } }
然而,这种设置会发生的情况是(例如)’anotherCondition’得到满足并重定向到’/ thanks’.由于onEnter是在根路由上传递的,因此再次触发redirectToInitialRoute.由于’anotherCondition’仍然是真的,重定向再次发生,导致重定向循环.
我想知道解决这个问题的最佳方法是什么?任何帮助是极大的赞赏.提前致谢!
如何添加索引路由然后重定向挂载?<Provider store={store}> <Router history={history}> <Route path="/" component={App} onEnter={redirectToInitialRoute}> <IndexRoute component={Welcome} /> <Route path="/send" component={OverviewPage} /> <Route path="/thanks" component={ConfirmPage} /> <Route path="/:categoryIdentifier" component={CategoryPage} /> </Route> </Router> </Provider>
然后在您的欢迎组件中:
componentDidMount: function () { if (condition) { browserHistory.push('/here'); } else { browserHistory.push('/there'); } }