React Router redirect using alternate route configuration

Question

I want to use the alternate configuration of React Router: https://github.com/rackt/react-router/blob/1.0.x/docs/guides/basics/RouteConfiguration.md#alternate-configuration

However, I'm having trouble getting redirect to work. I tried this:

const routes = {
  childRoutes: [
    { path: '/test', component: Test },
  ],
  component: App,
  path: '/',
  redirect: {
    from: '/',
    to: '/test',
  },
};

As far as I could tell, there is no documentation for this. Does the functionality exist? How should it be done?

tcollart · Accepted Answer · 2016-02-13 14:07:52Z

1

Comparing the sample code in the link you posted, with the sample above (in Preserving URLs), I think both samples refer to setting the same routes (the only difference probably is that the last one uses the Alternate Configuration). And we can infer that the current way of making redirects is using the onEnter function.

For instance, if you want this (using JSX):

<Redirect from="messages/:id" to="/messages/:id" />

And you use the Alternate Configuration, you'll have to write it like this:

{ path: 'messages/:id',
  onEnter: function (nextState, replaceState) {
    replaceState(null, '/messages/' + nextState.params.id)
  }
}

Update: Your particular case is special, because you want to redirect from /, so you might want to try using IndexRedirect or indexroute.

edited Feb 13, 2016 at 14:07

tcollart

1,0722 gold badges18 silver badges31 bronze badges

answered Dec 21, 2015 at 23:31

Mariano Desanze

8,2687 gold badges49 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Chris James Over a year ago

Thanks @Protron. This didn't work exactly but using onEnter got me thinking. Here's how I solved it:

onEnter: (nextState, transition) => {       if (nextState.location.pathname === '/') {         transition.to('/test', null);       }     },

Mariano Desanze Over a year ago

@Chris Nice! But in case you are interested in finding other solutions you might want to take a look at the update in my answer.

Kevin Ghadyani Over a year ago

transition isn't one of the arguments coming into the function for me. I'm having the same issue trying to redirect / to something else along with a bunch of others. This is much more complicated than <Redirect>, but then you can do require.ensure :/.

Collectives™ on Stack Overflow

React Router redirect using alternate route configuration

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related