Javascript 基于React中的状态重定向用户

现在，我的路由器看起来像这样：

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

function requireAuth(nextState, replace) {
    if (!loggedIn()) {
        replace({ pathname: 'login' });
    }
}

---

LoggedinPage

如果用户未登录，则重定向到

/login

；如果用户未完成登录流程（选择用户名等），则

OnboardedPage

重定向到

/onboarding

。然而，我认为将来可能需要更多这些有条件的重定向。处理这些条件重定向的最佳方法是什么？是否可以使用一个组件来处理所有重定向？

您可以使用一个功能来检查用户是否登录，然后导入：

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

s接受路由匹配时调用的

oneter

钩子。钩子看起来像这样：

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

function requireAuth(nextState, replace) {
    if (!loggedIn()) {
        replace({ pathname: 'login' });
    }
}

然后像这样使用它：

<Route path="/" component={AppPage}>
    <Route path="home" component={HomePage} onEnter={requireAuth}/>
    <Route path="login" component={LoginPage}/>
</Route>

然后把它们合起来

<Route path="/" component={AppPage}>
    <Route path="home" component={HomePage}
        onEnter={redirect(checkAuth, checkOnboarding)}/>
    <Route path="login" component={LoginPage}/>
    <Route path="onboarding" component={OnboardingPage}
        onEnter={redirect(checkAuth)}/>
</Route>

我必须以这种方式手动解析URL，对吗？就像我需要

if（localStorage.jwt==null&&&！window.location.pathname.match（/^\/login（\/|$）/）

有没有办法做到这一点并且仍然使用React Router解析URL？我重拨了答案。因此，您只需导入此函数，并在您要路由到的组件的渲染部分调用它。+1，这是一个很好的方法，唯一困扰我的是替换会刷新整个窗口，而SPA样式中不包含此函数。