如果他未登录,我试图将用户重定向到“TrapPage”。
这是我的代码:
function requireAuth(nextState, replace) {
if (!auth.loggedIn()) {
replace({
pathname:'/trap'
})
}
}
export default (
<Route path="/" component={App} onEnter={requireAuth}>
<IndexRoute component={DashboardPage} />
<Route path="trap">
<IndexRoute component={TrapPage}/>
</Route>
<Route path="accounts">
<IndexRoute component={AccountPage}/>
<Route path="add" component={AccountAdd} />
<Route path="detail/:id" component={AccountDetail} />
</Route>
<Route path="contacts">
<Route path="detail/:id" component={ContactPage}/>
</Route>
<Route path="transmissors">
<Route path="detail/:id" component={TransmissorPage}/>
</Route>
<Route path="attends" component={AttendancePage} />
<Route path="reports" component={ReportPage} />
<Route path="configs" component={ConfigurationPage} />
</Route>
);
当我将函数requireAuth放在onEnter上时,控制台给我一个错误:
Uncaught RangeError: Maximum call stack size exceeded
我是React的初学者,请耐心等待:)
我的代码有什么问题?
最佳答案
如果用户未登录,则您需要在将用户重定向到的路由上进行身份验证。这将导致重定向用户的无限循环,因为用户未登录。也许将<Route path="trap">
从需要的路由下面移出身份验证。
另外,您在函数上缺少第三个参数。
function requireAuth(nextState, replace)
应该
function requireAuth(nextState, replace, cb) {
完成身份验证逻辑后,您需要这样调用
cb
:function requireAuth(nextState, replace) {
if (!auth.loggedIn()) {
replace({
pathname:'/trap'
});
}
cb();
}
这是一个回调函数,它将使路由流程继续进行。
编辑:
您可以这样重新组织路线:
<Route path="/" component={App}>
<IndexRoute component={DashboardPage} />
<Route path="trap">
<IndexRoute component={TrapPage}/>
</Route>
<Route onEnter={requireAuth}>
<Route path="accounts">
<IndexRoute component={AccountPage}/>
<Route path="add" component={AccountAdd} />
<Route path="detail/:id" component={AccountDetail} />
</Route>
<Route path="contacts">
<Route path="detail/:id" component={ContactPage}/>
</Route>
<Route path="transmissors">
<Route path="detail/:id" component={TransmissorPage}/>
</Route>
<Route path="attends" component={AttendancePage} />
<Route path="reports" component={ReportPage} />
<Route path="configs" component={ConfigurationPage} />
</Route>
</Route>
然后根据您是否需要在仪表板上进行身份验证,也可以将
onEnter={requireAuth}
也添加到该路由。这会将需要身份验证的路由与不需要身份验证的路由分开。