Changing content in multiple ReactJS blocks?

Question

React

Hello toasters! There was a problem, in my index file several blocks are rendered at once - these are Top, Main and Footer.
Top is the top of the site (Navigation is in it), pages are displayed in Main, but I don’t think I will write about Footer, and so it’s clear.
So here's how to change the content in these three blocks at once, depending on the router, that is, if the authorization page is, then let's display the "About us" button in the Top block and display the authorization form itself in Main.
It is generally possible to implement, maybe there will be examples?

Answer 1

As an option, show different components along the authorization paths and the rest:

<Switch>
  <Route path="/(sign_in|sign_up|reset_password|confirm_email)" component={AuthRoutes} />
  <Route component={MainRoutes} />
</Switch>

Render Top and Footer in MainRoutes.