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?

Answers:

Answer

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.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.