Как сделать подключение дополнительных компонентов к роутам react?

Question

[Roman Chasovitin]

Добрый день всем. Имеется такая структура:
<Router>
      <Fragment>
        <Header />
        <div className="main">
          <Routes />
        </div>
        <Footer />
      </Fragment>
    </Router>

Роуты работают хорошо и переключаются корректно, в этот же момент header и footer не перерендериваются при каждом переключении роутов. Но возникла одна проблема, у меня есть пути, где отсутствую header и footer и их нужно отключать. Как это реализовать?

Answer 1

[Илья Смуров]

Добрый день.
Нужно сделать общий компонент, в котором по флагу отображать футер и хедер и использовать его внутри роутов.

<Fragment>
  {thid.props.flag && <Header />}
  {this.props.children}
  {thid.props.flag && <Footer />}
</Fragment>

Answer 2

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

<Switch>
  <Route exact path="/(route1|route2|route3)" component={RoutesWithoutHeaderAhdFooter} />
  <Route component={RoutesWithHeaderAndFooter} />
</Switch>