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

Question

[Марат Иванов]

есть главная страница, и там роутер типа

<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. который должен рендериться без хедера меню и контента с футером. Как быть, подскажите пожалуйста.

Answer 1

[Антон Спирин]

<Switch>
  <Route exact path="/services" component={Services} />
  <Route exact path="/login" component={Login} />
  <Route path="/" component={Wrapper} />
</Switch>

NotFound надо перенести в Switch компонента Wrapper.

Comments

[Марат Иванов]

Спасибо! я так и сделал. Но правильно ли это? не должны ли роутеры все быть в одном месте?

[Антон Спирин]

Айрат Мухаметшин, да. Это нормальная практика.

[Андрей Костяев]

Айрат Мухаметшин, Роуты скорее всего так можно описать : "Штука которая описывает, в какой части компонента,, какой именно компонент рендерить при опрделенном роуте, так что Switch можетт быть в разных местах"