How do you write nested routes after dynamic path in React Router v5.2?

user_1605847 0
Viewed 267

I'm trying to write a route that uses a dynamic path and then add an additional parameter after that. The problem is it's being ignored and not rendering my component. As an example the following code works.

<Route path={`${SPA_PREFIX}/cases/:caseToken`} component={CaseView} />}
<Route path={`${SPA_PREFIX}/notifications`}><NotificationsView /></Route>

However, the following doesn't work. This will render the CaseView component in the previous example. This should render the <Sars /> component, but it gets ignored.

Update:

                    {caseManagement
                      && <Route path={`${SPA_PREFIX}/cases/:caseToken`} exact component={CaseView} />}
                    {caseManagement
                      && <Route path={`${SPA_PREFIX}/cases`}><CasesView /></Route>}
                    <Route path={`${SPA_PREFIX}/notifications`}><NotificationsView /></Route>
                    <Route path={`${SPA_PREFIX}/audit`}><AuditView /></Route>
                    <Route path={`${SPA_PREFIX}/cases/:caseToken/sars`} component={Sars} /> 
                    <Route path={`${SPA_PREFIX}/settings`}><SettingsView /></Route>

What am I doing wrong?

react-router reactjs
3 Answers

I suspect the issue is just a route ordering issue. I see you are rendering path={`${SPA_PREFIX}/cases/:caseToken`} before path={`${SPA_PREFIX}/cases/:caseToken/sars`}. Remember that when using the Switch component that it renders the first child <Route> or <Redirect> that matches the location. "/cases/:caseToken" is less specific than "/cases/:caseToken/sars" so it matches more URL paths, so if it is found first it will be matched and render the routed component.

Within the Switch you should order the routes in descending order path specificity. If ordered correctly there is a near-zero need to use the exact prop. ${SPA_PREFIX}/cases/:caseToken/sars is more specific than ${SPA_PREFIX}/cases/:caseToken is more specific than ${SPA_PREFIX}/cases, and should be rendered in this order within the Switch component.

There should also be no other components between the Switch and Route or Redirect components for the exclusive route matching to work correctly.

Example:

<Switch>
  <Route
    path={`${SPA_PREFIX}/cases/:caseToken/sars`}
    component={Sars}
  />
  <Route path={`${SPA_PREFIX}/cases/:caseToken`} component={CaseView} />
  <Route path={`${SPA_PREFIX}/cases`}>
    <CasesView />
  </Route>
  <Route path={`${SPA_PREFIX}/notifications`}>
    <NotificationsView />
  </Route>
  <Route path={`${SPA_PREFIX}/audit`}>
    <AuditView />
  </Route>
  <Route path={`${SPA_PREFIX}/settings`}>
    <SettingsView />
  </Route>
</Switch>

Edit how-do-you-write-nested-routes-after-dynamic-path-in-react-router-v5-2

user_86908570

Try adding the exact prop to the Route and wrapping the routes in a switch tag

<Switch>
{caseManagement
                      && <Route path={`${SPA_PREFIX}/cases/:caseToken`} exact component={CaseView} />}
                    {caseManagement
                      && <Route path={`${SPA_PREFIX}/cases`}><CasesView /></Route>}
                    <Route path={`${SPA_PREFIX}/notifications`}><NotificationsView /></Route>
                    <Route path={`${SPA_PREFIX}/audit`}><AuditView /></Route>
                    <Route path={`${SPA_PREFIX}/cases/:caseToken/sars`} component={Sars} /> 
                    <Route path={`${SPA_PREFIX}/settings`}><SettingsView /></Route>
</Switch>
user_20124870

Try adding the exact prop to the Route

<Route exact path={`${SPA_PREFIX}/cases/:caseToken`} component={CaseView} />}
<Route exact path={`${SPA_PREFIX}/notifications`}><NotificationsView /></Route>
user_104291690
Related