javascript - How to get parent parameter in nested route? -

i have following basic structure of nested routes/components react app:

• /users -> userslist
• /users/:id -> userlayout
  • /users/:id/ -> userprofile
  • /users/:id/settings -> usersettings
  • /users/:id/blah -> yetanothercomponent

what i'm trying figure out, in context of react router v4, how access :id parameter in usersettings component. can access fine in userlayout component, else further downstream.

my main router definition lies in home component, user-specific routes contain same header information want user-specific routes nested. current structure has these nested routes defined in userlayout component. however, no matter layout component's route definition, cannot other route "index" route (userprofile) render. when trying access usersettings or other route, top level 404 route gets hit instead.

here's relevant jsx (snippets of actual components' render functions):

home

<main>      <switch>          <route exact path="/login" component={login} />          <route exact path="/users" component={userslist} />          <route exact path="/users/:id" component={userlayout} />          <route exact path="/" component={home} />          <route component={nomatch} />      </switch> </main> 

userlayout

<div>      <switch>          <route path={`${match.url}/settings`} component={usersettings} />          <route path="/users/:id/blah" component={yetanothercomponent} />      </switch>      <route path="/users/:id" component={userprofile} /> </div> 

in userlayout component i've tried both path formats shown in switch , have tried turning on/off exact matching. thing can come using route component's render parameter pass id parameter, seems wrong. option?

of course few minutes after post, figured out. in top-level route config, had set /user/:id require exact match. meant when navigated /user/:id/anything_else react router didn't load userlayout @ , didn't chance test remainder of routes had configured.

so changed home component:

<route exact path="/users/:id" component={userlayout} /> 

...to this:

<route path="/users/:id" component={userlayout} /> 

... , world.