React Router |другой компонент в том же URL

Question

Я использую React Router 4.2.0 .В моем сценарии я должен загрузить разные компоненты в одном URL.

У меня есть два компонента Login и Dashboard

, когда я запускаю localhost:3000, компонент должен загружаться на основе флага localstorage.

Я пытался со следующимкод показывает 404 страницы

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

Answer 1

По умолчанию маршруты сопоставляются включительно (как можно больше).Подстановочный знак перехватывает все, если вам нужно эксклюзивно переключаться между ними, вам нужно использовать компонент Switch.Другими словами:

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

Выше будет соответствовать страница входа в систему в корне, а затем откат на 404.