react Maximum call stack size exceeded

问题

I trying to redirect the user to the "TrapPage" if he is not logged in.

Here is my code:

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

When I put the function requireAuth at onEnter, the console gives me an error:

Uncaught RangeError: Maximum call stack size exceeded

I am a begginer at React, please be patient :)

What is wrong at my code?

回答1:

You are requiring authentication on the same route that you redirect the user to if he is not logged in. That leads to an infinite loop of redirecting the user because he isn't logged in. Perhaps move out the <Route path="trap"> from underneath the routes that require authentication.

Also, you are missing a third parameter on your function.

function requireAuth(nextState, replace)

should be

function requireAuth(nextState, replace, cb) {

and once you are done with the authentication logic, you need to call cb as such:

function requireAuth(nextState, replace) {
    if (!auth.loggedIn()) {
        replace({ 
            pathname:'/trap'
        });
    }

    cb();
}

It's a callback function that will let the flow of the routing continue.

EDIT:

You could re-organize your routes as such:

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

And then depending on wether you need authentication on your dashboard or not, you could potentially add the onEnter={requireAuth} to that route as well. This will separate out the routes that need authentication from the ones that don't.

来源：https://stackoverflow.com/questions/38099497/react-maximum-call-stack-size-exceeded

标签

javascript

reactjs

stack-overflow

react-router