How to use React Router's redirect function?

Question

I want to configure React Router in the following way. If a certain route is matched the user is redirected to another one. Documentation states that it is possible, but doesn't provide the exact way to achieve that. Does anyone have insight on this?

type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any;  type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void; 

Answer 1

EDIT See other answer for new, non-deprecated react-router syntax

---

There's a good example of how to use the onEnter hook in the auth-flow example. Here's the relevant code:

function requireAuth(nextState, replaceState) {   if (!auth.loggedIn())     replaceState({ nextPathname: nextState.location.pathname }, '/login') }  render((   <Router history={history}>     <Route path="/" component={App}>       <Route path="login" component={Login} />       <Route path="logout" component={Logout} />       <Route path="about" component={About} />       <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />     </Route>   </Router> ), document.getElementById('example')) 

As you can see, when the /dashboard route is accessed the requireAuth function is called. It receives two arguments: nextState, which is a RouterState object that represents the state the user is about to enter, and replaceState, a RedirectFunction that can be called to replace that state with something else. In this case, if the user isn't logged in, requireAuth calls replaceState like this:

replaceState({ nextPathname: nextState.location.pathname }, '/login') 

The second argument is obviously the pathname the user will be redirected to. The very first argument is an object that can contain any data we want the route handler (in this case the Login component) to have. Here the pathname the user was trying to go to (/dashboard) is set as the nextPathname property so after logging in the user can be redirected to that page (see the handleSubmit method in the Login component).

If the user is logged in, requireAuth does nothing, and since replaceState is never called the route works as usual, which is to say the Dashboard component is rendered.

Answer 2

Heads up to anyone reading this question as of react-router 2.0.0, replaceState(state, pathname, query) is now deprecated. You must now use replace(location) with a location descriptor instead.

https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors

From their guide:

// v1.0.x (nextState, replaceState) => replaceState(null, '/foo') (nextState, replaceState) => replaceState(null, '/foo', { the: 'query' })  // v2.0.0 (nextState, replace) => replace('/foo') (nextState, replace) => replace({ pathname: '/foo', query: { the: 'query' } })