CODEWITHSUNDEEP
reactjsreact-router
London804
London804

Reputation: 1116

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

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?

Upvotes: 1

Views: 968

Answers (3)

Drew Reese
Drew Reese

Reputation: 202686

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

Upvotes: 1

VersifiXion
VersifiXion

Reputation: 2282

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>

Upvotes: 0

Aguardientico
Aguardientico

Reputation: 7779

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>

Upvotes: 0

Related Questions