Question

我有一个关于使用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');
    }
}

然而，这种设置会发生什么（例如）＆＃39; anotherCondition＆＃39;已完成并重定向到＆＃39; / thanks＆＃39;。由于onEnter是在根路由上传递的，因此再次触发redirectToInitialRoute。由于＆＃39;另一个条件＆＃39;仍然如此，重定向再次发生，导致重定向循环。

我想知道解决这个问题的最佳方法是什么？任何帮助是极大的赞赏。提前谢谢！

Answer 1

如何添加索引路由，然后在mount上重定向？

<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'); 
    }
}

使用react-router设置初始路由

1 个答案: