react超出最大调用堆栈大小

时间:2016-06-29 12:26:06

标签: javascript reactjs stack-overflow react-router

我尝试将用户重定向到" 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的先生,请耐心等待:)。

我的代码出了什么问题?

1 个答案:

答案 0 :(得分:7)

如果用户未登录,则需要在将用户重定向到的相同路由上进行身份验证。这会导致无限循环重定向用户,因为他未登录。或许移出{{1}来自需要身份验证的路由下方。

此外,您缺少函数的第三个参数。

<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> 添加到该路由中。这会将需要身份验证的路由与不需要身份验证的路由分开。