score:1

Accepted answer

When actually nesting your routes then no Route components with nested sub-routes can specify the exact prop because the nested routes won't be able to match exactly and be rendered.

Take a look at react-router-dom's nesting example.

Another aspect to take note of, within Switch components, path order and specificity matter. The Switch will attempt to return and render the first match it finds, you will want to order the routes to list your more specific paths before less specific paths. In other words, "/segment1/segment2" before "/segment1" before "/".

Root level

<Switch>
  <Route path='/app' component={AppPages} />
  <Route path='/mobile' component={MobilePages} />
  <Route path='/' component={LandingPages} />
</Switch>

Use the useRouteMatch hook to access the current path.

path - (string) The path pattern used to match. Useful for building nested <Route>s

Landing pages

const { path } = useRouteMatch();

...

<Switch>
  <Route path={`${path}/privacypolicy`} component={PrivacyPolicy} />
  <Route path={`${path}/termsandconditions`} component={TermsnConditions} />
  <Route path={path} component={HomePage} />
</Switch>

App pages

const { path } = useRouteMatch();

...

<Switch>
  <Route path={`${path}/signin`} component={SignIn} />
  <Route path={`${path}/resetpassword`} component={ResetPassword} />
  <Route path={`${path}/register`} component={Register} />
  <Route path={path} component={Dashboard} />
</Switch>

Mobile pages

const { path } = useRouteMatch();

...

<Switch>
  <Route path={`${path}/one`} component={One} />
  <Route path={path} component={MobHome} />
</Switch>

Related Query

More Query from same tag