CODEWITHSUNDEEP
reactjsreact-routerreact-router-redux
eXtreaL
eXtreaL

Reputation: 63

Setting initial route with react-router

I've got a question about setting up initial routes with react-router (in combination with Redux). I've got a few routes set up and based on the state from my Redux store I need to always redirect the user to a certain route on page load.

The way my routes are currently set up is as follows:

<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App} onEnter={redirectToInitialRoute}>
            <Route path="/send" component={OverviewPage} />
            <Route path="/thanks" component={ConfirmPage} />
            <Route path="/:categoryIdentifier" component={CategoryPage} />
        </Route>
    </Router>
</Provider>

I've added the onEnter function to my root route. I've done this since I always need to redirect on page load, independent of what page the user is entering the app on. The way my onEnter function is setup is as follows:

function redirectToInitialRoute (nextState, replace) {
    if (condition) {
        replace('/send');
    }
    else if (anotherCondition) {
        replace('/thanks');
    }
}

However what happens with this setup, is that (for example) 'anotherCondition' is fulfilled and redirects to '/thanks'. Since the onEnter is passed on the root route, the redirectToInitialRoute is triggered again. Since the 'anotherCondition' is still true, the redirect occurs again causing a redirect loop.

I was wondering what would be the best way to solve this issue? Any help is greatly appreciated. Thanks in advance!

Upvotes: 5

Views: 6369

Answers (1)

Brian Shotola
Brian Shotola

Reputation: 472

How about adding an index route and then redirecting on mount?

<Provider store={store}>
    <Router history={history}>
        <Route path="/" component={App} onEnter={redirectToInitialRoute}>
            <IndexRoute component={Welcome} />          
            <Route path="/send" component={OverviewPage} />
            <Route path="/thanks" component={ConfirmPage} />
            <Route path="/:categoryIdentifier" component={CategoryPage} />
        </Route>
    </Router>
</Provider>

Then in your Welcome Component:

componentDidMount: function () {
    if (condition) { 
        browserHistory.push('/here'); 
    } else { 
        browserHistory.push('/there'); 
    }
}

Upvotes: 5

Related Questions