How to remove global header on some react pages?

Question

React

There is a structure:

render(
  (
      <ReduxProvider store={store}>
          <LangProvider>
              <ThemeProvider theme={theme}>
                  <ReactRouter>
                      <div>
                          <Switch>
                              <Route path="/sign-in" component={SignInPage}/>
                              <Route path="/sign-up" component={SignUpPage}/>
                              <Route path="/sign-forgot" component={SignForgotPage}/>
                          </Switch>

                          <Header />
                          <Route exact path="/" component={HomePage}/>
                          <Route path="/product/:id" component={ProductPage}/>
                          <Route path="/setting" component={SettingPage} />
                          <Route path="/orders" component={OrdersPage} />
                          <Route path="/reviews" component={ReviewsPage} />
                          <Route path="/shop/:id" component={ShopPage} />
                          <Route path="/category/:id" component={CategoryPage} />
                          <Route path="/cart" component={CartPage} />
                          <Route path="/favorites" component={FavoritesPage} />
                          <Route path="/categories/:id" component={CategoriesPage} />
                          <Route path="/article/:id" component={ArticlePage} />
                          <Footer />
                      </div>
                  </ReactRouter>
              </ThemeProvider>
          </LangProvider>
      </ReduxProvider>
  ),
  document.getElementById('root')
);

I have header and footer rendered on first load on all pages. But there are sign-in, sign-up, and sign-forgot pages. There you need to hide the header and footer. Please help. I saw that you can do layouts, but in version 4 it seems that they forbade placing child elements in Route.
I thought about doing checks for puth in the url, whether there is a sign there. But I thought, suddenly there are built-in tools for this in react-router

Answer 1

There you need to hide the header and footer.

It would be better not to render it at all there.
One of the many solutions:

<Switch>
  <Route path="/(sign-in|sign-up|sign-forgot)" component={AuthRoutes} />
  <Route component={MainRoutes} />
</Switch>

Crutches.
And why not sit down and study the documentation of the tool that you use in your work, instead of tormenting yourself with guesswork?