Как правильно разложить роуты в проекте?

есть главная страница, и там роутер типа
<Router history={createBrowserHistory()} >
      <ScrollToTop>
        <Suspense fallback={<LoadingComponent />}>
          <Switch>
            <Route path="/" component={Wrapper} />
            <Route exact path="/services" component={Services} />
            <Route exact path="/login" component={Login} />
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </ScrollToTop>
    </Router>

Здесь главная страница (Wrapper) подгружает компоненты хедер, футер, боковое меню, и центральный блок контент.
В контенте меняются страницы. и там стоит роутер типа
<Switch>
        <Route exact path="/" component={Component1} />
       <Route exact path="/" component={Component2} />
       <Route exact path="/" component={Component3} />
</Switch>


При такой раскладке не работает роут с /Login. который должен рендериться без хедера меню и контента с футером. Как быть, подскажите пожалуйста.
  • Вопрос задан
  • 41 просмотр
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
<Switch>
  <Route exact path="/services" component={Services} />
  <Route exact path="/login" component={Login} />
  <Route path="/" component={Wrapper} />
</Switch>

NotFound надо перенести в Switch компонента Wrapper.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы