React Router | different component in same url

Question

I'm using React Router 4.2.0. In my scenario I have to load different components in same url.

I have two components Login and Dashboard

when I run localhost:3000 component should load based on the localstorage flag.

I tried with following code It shows 404 page

 <Route path='*' component={NotFound} />
 <Route path="/" render={(props) => {
    if (localStorage.getItem('user')) { 
       return <Dashboard /> 
    }
    else {
       return <Login />
    }
 }} />

Its always better to have separate route for login, you can redirect to that route if the person is not loggedIn, Check this answer on how to perform authentication stackoverflow.com/questions/47627818/… — Shubham Khatri
– Shubham Khatri, Commented Jun 7, 2018 at 12:56

Ragul Parani · Accepted Answer · 2018-06-07 15:35:53Z

2

By default routes are matched in an inclusive manner (as many as possible). The wildcard catches everything, if you need to switch between them in an exclusive manner, you need to use the Switch component. In others words:

    <div className="App">
      <Switch>
        <Route path="/" component={Login}/>
        <Route path="*" component={NotFound} exact/>
      </Switch>
    </div>

The above will match the login page on the root, then fallback on the 404.

edited Jun 7, 2018 at 15:35

Ragul Parani

6217 silver badges23 bronze badges

answered Jun 7, 2018 at 12:56

adz5A

2,03211 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Router | different component in same url

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related