Setting the initial route using the jet router

Question

I had a question about setting up initial routes using a jet router (in combination with Redux). I have several routes configured and state based from my Redux repository. I need to always redirect the user to a specific route when the page loads.

My routes are currently configured 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 added the onEnter function to my root route. I did this because I always need to redirect to page loading, no matter what page the user enters the application on. The way to set my onEnter function is as follows:

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

However, what happens with this setting is that (for example) "anotherCondition" is executed and redirected to "/ thanks". Since onEnter is passed along the root route, redirectToInitialRoute starts again. Since "anotherCondition" is still true, the redirection occurs again, causing a redirect cycle.

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

Answer 1

How to add an index route and then redirect to 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'); } }