如何使用react路由器将重定向重写为普通路由？

Question

Using react 15.1.0 and react-router 2.5.2 , I wish to rewrite the following JSX syntax:

<Router routes={routes} history={hashHistory}>
  <Redirect from="/" to="/users" />
  <Route path="/" component={Navigation}>
    <Route path="/users" component={UsersPage}/>
    <Route path="/endpoints" component={EndpointsPage}/>
  </Route>
</Router>

Into plain routes, like this:

const routes = {
  path: '/',
  component: Navigation,
  childRoutes: [
    {path: '/users', component: UsersPage},
    {path: '/endpoints', component: EndpointsPage}
  ],
  onEnter: (nextState, replace) => replace('/users')
};

React.render(<Router routes={routes} history={hashHistory}/>, element);

However the result of the latter is always:

Uncaught RangeError: Maximum call stack size exceeded

The onEnter: (nextState, replace) => replace('/users') is apparently not sufficient to replace the <Redirect from="/" to="/users" /> . How can I rewrite the redirect successfully? Is there a better way to make navigation to / always end up at /users ?

Answer 1

There is a thing called IndexRedirect which I was unaware of. Using index redirect, the correct way to do this in plain routes is:

const routes = {
  path: '/',
  component: Navigation,
  indexRoute: {onEnter: (nextState, replace) => replace('/users')},
  childRoutes: [
    {path: '/users', component: UsersPage},
    {path: '/endpoints', component: EndpointsPage}
  ]
};

React.render(<Router routes={routes} history={hashHistory}/>, element);