CODEWITHSUNDEEP
javascriptreactjsroutesreact-router
texmex44
texmex44

Reputation: 53

React + React-router -> Child routes best organization?

I have a conceptual problem concerning my authentification pages.

Currently i 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 all my 'Auth page' in a 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>

The problem : Now if i would like to access to my login page i would go to

/auth/login

But i need my login page stay on

/login

What is the best pratice to do this ?

Thank in advance for your help.

Upvotes: 4

Views: 1041

Answers (2)

texmex44
texmex44

Reputation: 53

Finaly found a solution who work fine

<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>

Upvotes: 0

Ori Drori
Ori Drori

Reputation: 191976

Although it's intended more for backwards comparability, you can just use the react-router's Redirect component:

<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>

Upvotes: 1

Related Questions