How to set up routing here using react-router-dom?

Question

React

Hello everyone
There is a similar project:

The red zone should be repeated, and the blue one should change. For red, I have two components, and for blue, I have different others.
I am using react-router-dom. You can re-render everything together every time, but this is stupid.
That is, routing only affects the blue zone

Answer 1

The names are up to you, the idea is something like this. The rest depends on the code style you have adopted and the organization of the styles (RSCSS, BEM, SMACSS, ...)

<Root>
  <Sidebar />
  <Main>
    <Navbar />
    <Content>
      <Switch>
        <Route ... />
      </Switch>
    </Content>
  </Main>
</Root>