React Router Redirect Using Alternate Route Configuration
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?
Answer
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.
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?