React Router с отдельными страницами

Question

У меня есть отдельная страница входа и главная страница, где после входа пользователя они переносятся на главную.Я использую это:

import Main from './Main';    // Original <App /> page
import Login from './Login';  // New <Login /> page  

// In App component  

<Router>  
  <Switch>
    <Route exact path="/" component={Main} />  
    <Route path="/login" component={Login} />
    <Route component{NotFound} />
  </Switch>
</Router>

, который работает до сих пор, однако, если я хочу получить доступ к "странице" в компоненте Main:

<Route exact path="/users" component={Users} />

используя что-то вроде localhost:3000/users в URL, он переходит на пустую страницу.Единственный способ получить доступ к /users - начать с компонента Main и щелкнуть ссылку или кнопку, которая ведет к /users.

Кто-нибудь знает правильный подход к этому?Я хотел бы иметь возможность доступа к компонентам внутри URL, но также иметь отдельную страницу входа.

Если я изменю exact path='/' на просто path='/', это может сработать, но тогда я потеряю любой видвсе для не найденных страниц.

Answer 1

Посмотрите на приведенный ниже код для достижения желаемого результата:

               <Switch>                  
                {this.props.notLoggedIn === true
                  ? <Route path='/' component={LandingPage}/>                                          
                  : <Dashboard />                    
                }
                <Route component={PageNotFound}/>
              </Switch>    

В приведенном выше случае я показываю целевую страницу в качестве маршрута по умолчанию, и в случае, если пользователь вошел в систему на приборной панели, отображается(содержит больше маршрутов).Подробнее см. Ответ здесь

Answer 2

Вы должны поместить <Route exact path="/users" component={Users} /> в Компонент приложения, а не в Основной Компонент

<Route> определяет, какой компонент должен отображаться, в то время как <Link to> определяет URL, который мы пойдем после щелчка.Если вы помещаете Маршрут в Основной Компонент, то сначала необходимо загрузить Основной Компонент, чтобы определить маршрут