时间戳

首页 > 解决方案 > 如何在 React Router v2 中为特定参数值渲染嵌套路由？

reactjs - 如何在 React Router v2 中为特定参数值渲染嵌套路由？

问题描述

我目前在一个项目中使用 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组件将使用 props{params: {ref: '...'}}而不是它匹配的值呈现tab，因此它不会显示"pages"选项卡。由于路由器没有理由在Admin没有匹配的情况下进行渲染:tab，所以我不明白为什么省略了这个参数。

标签： reactjsreact-routernested-routes

解决方案

我找到了使用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, [])
    }
  }}
/>

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

推荐阅读