超过最大调用堆栈大小

IT技术 javascript reactjs stack-overflow react-router
2021-04-28 03:28:22

如果用户未登录,我会尝试将用户重定向到“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个回答

如果用户未登录,您需要在将用户重定向到的同一路由上进行身份验证。这会导致重定向用户的无限循环,因为他未登录。也许<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}到该路由中。这会将需要身份验证的路由与不需要身份验证的路由区分开来。