如何在React Router v2中呈现特定param值的嵌套路由？

Question

我目前在一个项目中使用React Router v2.8.1，虽然我很想这样做，但我真的没有办法迁移到v4+。我有一个组件(Admin)，它处理的是显示一些基于 tab param，我的目的是为一个特定的标签页充实一些额外的路由("pages"例如，）。)

<Router history={browserHistory}>
  <Route path="/" component={Layout}>
    <Route path="/admin/:tab" component={Admin}>
      <Route path="/admin/pages/edit/:ref" component={EditPages} />
    </Route>
  </Route>
</Router>

在这种设置下 Admin 组件是用道具渲染的 {params: {ref: '...'}} 的值，而不是 tab 匹配的，所以它不会显示它的 "pages" 选项卡。由于没有理由让路由器呈现出 Admin 无缘 :tab我不明白为什么这个参数被省略了。

Answer 1

我发现了一个变通的方法，使用了 getChildRoutes 道具。

<Route
  path="/admin/:tab"
  component={Admin}
  getChildRoutes={(location, cb) => {
    const { tab } = location.params
    switch (tab) {
      case 'pages':
        cb(null, {
          path: 'edit/:ref',
          component: EditPages
        })
        break
      default:
        cb(null, [])
    }
  }}
/>

我希望这对今后可能遇到这个问题的人有所帮助。