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

Question

I am currently using React Router v2.8.1 in a project and, although I'd prefer to, I don't really have the option of migrating to v4+. I have a component (Admin) that deals with showing some content based on the tab param in the route, and my aim is to flesh out some extra routing for a specific tab ("pages", for example).

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

With this setup, the Admin component is rendered with props {params: {ref: '...'}} instead of the value of tab that it matched on, and so it won't show the "pages" tab. Since there is no reason for the router to render Admin without having a match for :tab, I do not understand why this param is being omitted.

Edwin · Accepted Answer · 2020-06-09T15:01:58.253

I have found a workaround to this using the 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, [])
    }
  }}
/>

I hope this helps anyone who might come across this issue in the future.

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

1 Answers1