How to connect additional components to react routes?

Question

JavaScript

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

The routes work well and switch correctly, at the same time the header and footer are not re-rendered on every route switch. But there was one problem, I have paths where the header and footer are missing and they need to be disabled. How to implement it?

Answer 1

Good afternoon.
You need to make a common component in which to display the footer and header by the flag and use it inside the routes.

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