React-router: onEnter replace not working

[aluksidadi]

Hi all,

I just implemented the version 2.0.0-rc5 and i found out that the replace function did not work.
Here's my code:

function requireAuth(nextState, replace, callback) {
    if (!AuthStore.isAuthenticated()) {
        var goto = {pathname: '.login', query: {redirectTo: nextState.location.pathname}};
        replace(goto);
    }
}

I even tried:

function requireAuth(nextState, replace, callback) {
    if (!AuthStore.isAuthenticated()) {
        replace('/login');
    }
}

both does nothing. Am i missing anything?

Just to add more context into this problem, i put the function in my route component:

<Router>
    <Route path='/'>
        <Route path='app' onEnter={ requireAuth }>
            ....
        </Route>
    </Route
</Router>

[taion]

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router.

Questions like yours deserve a purpose-built Q&A forum. Could you post this question to Stack Overflow with the tag #react-router? https://stackoverflow.com/questions/ask?tags=react-router

We also have an active and helpful React Router community on Reactiflux, which is a great place to get fast help with React Router and with the rest of the React ecosystem. You can join at https://discord.gg/0ZcbPKXt5bYaNQ46.

[jitchavan]

@taion look like github itself need to have segregation between "Issues" and "Bugs". it is better to have implementation related issues here itself so those can be easily accessible.

[taion]

This is neither – it's just user error.

[djanosik]

I am not sure whether this is related or not... but I think there is an issue with replace and callback. Consider following code:

1) Routing configuration

function getRoutes() {
    return {
        path: "/",
        indexRoute: require("./Home"),
        component: require("./Shared/Layout"),
        onEnter: handleEnter,
        childRoutes: [
            require("./Login"),
            require("./Secured"),
            require("./Any")
        ]
    }
}

function handleEnter(nextState, replace, callback) {
    let state = store.getState()

    if (!state.hasIn(["shared", "user"])) {
        store.dispatch(fetchUser())
            .then(callback)
    }
}

2) ./Secured route configuration

export = {
    path: "/secured",
    component: require("./Secured"),
    onEnter(nextState, replace) {
        let state = store.getState()

        if (!state.getIn(["shared", "user"])) {
            replace("/login")
        }
    }
}

It should work like this:

1. Fetch user when entering root route (async operation, we need callback)
2. Go to /secured and check whether user is authenticated when entering the route
3. If user is not authenticated go to /login

The problem is that the /login page will not be rendered. The URL is changed to /login, but nothing is displayed and there are no error messages in console.

When I remove callback and async operation from the root route configuration, it works as expected. Am I doing something wrong?

[taion]

Please use a support forum for usage questions.

[zhaytee]

Dismissing this issue as "user error" without any discussion or investigation doesn't seem very productive or helpful any way you look at it.

I'm experiencing this issue as well, and I'm including the appropriate callback() calls.