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

Question

使用 react 15.1.0 和 react-router 2.5.2，我希望重写以下 JSX 语法：

<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>

进入普通路线，像这样：

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);

然而后者的结果总是：

Uncaught RangeError: Maximum call stack size exceeded

onEnter: (nextState, replace) => replace('/users') 显然不足以替代 <Redirect from="/" to="/users" />。如何成功重写重定向？有没有更好的方法让导航到 / 总是在 /users 结束？

Answer 1

有个叫IndexRedirect的东西我不知道。使用索引重定向，在普通路由中执行此操作的正确方法是：

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);

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

How do I rewrite redirects to plain routes using react router?

javascript

jsx

react-router