根据React中的状态重定向用户

Question

现在,我的路由器看起来像这样:

<Router history={browserHistory}>
    <Route component={Provider}>
        <Route path="/" component={AppPage}>
            <Route path="login" component={LoginPage}/>
            <Route component={LoggedinPage}>
                <Route path="onboarding" component={OnboardingPage}/>
                <Route component={OnboardedPage}>
                    <IndexRoute component={HomePage}/>
                    <Route path="settings" component={SettingsPage}/>
                </Route>
            </Route>
        </Route>
    </Route>
</Router>

LoggedinPage重定向到/login如果用户没有登录和OnboardedPage重定向到/onboarding,如果用户还没有完成初始启用流量(选择的用户名等).但是,我认为将来可能需要更多这些有条件的重定向.处理这些条件重定向的最佳方法是什么？是否可以使用单个组件来处理所有重定向？

Answer 1

您可以有一个函数来检查用户是否已登录，然后只需导入该函数：

import {browserLocation} from './browser-location'
export default function checkLoggedIn() {
    if (localStorage.jwt === null)
        browserLocation.pushState('/login')
}