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

Question

我目前在一个项目中使用 React Router v2.8.1，虽然我更愿意，但我真的没有迁移到 v4+ 的选项。我有一个组件 (Admin) 用于根据路由中的 tab 参数显示一些内容，我的目标是为特定选项卡充实一些额外的路由 ("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" 选项卡。由于路由器没有理由在没有匹配 :tab 的情况下呈现 Admin，我不明白为什么省略此参数。

Answer 1

我使用 getChildRoutes prop 找到了解决此问题的方法：

<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, [])
    }
  }}
/>

我希望这对以后可能遇到此问题的任何人有所帮助。

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

How do I render nested routes for a specific param value in React Router v2?

nested-routes

reactjs

react-router