Javascript 超出最大调用堆栈大小

如果用户未登录，我会尝试将其重定向到“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>
);

我是个乞丐，请耐心点：）

---

“我的代码”有什么问题？

如果用户未登录，您需要在重定向用户的同一路径上进行身份验证。这会导致无限循环重定向用户，因为他没有登录。也许可以将

从需要身份验证的路由下面移出

此外，函数中缺少第三个参数

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}

。这将区分需要验证的路由和不需要验证的路由。

您对更改路由有什么建议吗？@AlessanderFrança我更新了我的答案，为您提供了更多的指导。好的，我在这里尝试：）

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