React + React-router & # 8594; Is the best organization children's route?

Question

I have a conceptual issue related to my authentication pages.

I currently have this:

<Route path="/" component={App}>
  <Route path="login" component={Login} />
  <Route path="register" component={Register}/>
  <Route path="*" component={NoMatch}/>
</Route>

Now I would like to wrap my entire page "Auth" in the parent container "Auth", so I do this:

<Route path="/" component={App}>
  <Route path="/auth" component={Auth}>
    <Route path="login" component={Login} />
    <Route path="register" component={Register}/>
  </Route>
  <Route path="*" component={NoMatch}/>
</Route>

Problem: now, if I wanted to access my login page, I would go to

/ authentication / login

But I need my login page to stay

/Login

What is the best opportunity for this?

Thanks in advance for your help.

Answer 1

Finaly found a solution that works great

<Route path="/" component={App}>
  <Route path="/" component={Auth}>
    <Route path="login" component={Login} />
    <Route path="register" component={Register}/>
  </Route>
  <Route path="about" component={About} />

  <Route path="*" component={NoMatch}/>
</Route>

Answer 2

, response-router Redirect:

<Route path="/" component={App}>
  <Route path="/auth" component={Auth}>
    <Route path="login" component={Login} />
    <Route path="register" component={Register}/>
  </Route>

  <Redirect from="/login" to="/auth/login" />

  <Route path="*" component={NoMatch}/>
</Route>