React-Router nested routes names

Question

I would like to implement that kind of routes in react-router v4.

/auth => auth home page    
/auth/login => login page    
/auth/register => register page     
/auth/forgot => lost password page      
/auth/reset => change password page

It doesn't work with <Switch> because it first match /auth and render the associated component. So as I click on the link to go to the login page for instance it renders the Auth Component and not the Login Component.

How can I implement that behavior with react-router ? I tried nested routing but if I take the same example as before, It would renders the Auth Component + Login Component.

Thanks.

Steve Holgado · Accepted Answer · 2018-02-12T19:16:14.053

You can add the exact prop to your /auth route:

<Switch>
  <Route exact path='/auth' component={Auth} />
  <Route path='/auth/login' component={Login} />
  <Route path='/auth/register' component={Register} />
  <Route path='/auth/forgot' component={ForgotPassword} />
  <Route path='/auth/reset' component={ChangePassword} />
</Switch>

Alternatively, you could move your /auth route to the end of the list so other routes match first:

<Switch>
  <Route path='/auth/login' component={Login} />
  <Route path='/auth/register' component={Register} />
  <Route path='/auth/forgot' component={ForgotPassword} />
  <Route path='/auth/reset' component={ChangePassword} />
  <Route path='/auth' component={Auth} />
</Switch>

I hope this helps.

React-Router nested routes names

1 Answers1