Different Layout for pages?

Question

React

Good evening, there are 3 different Layouts for different pages:

1. With header and sidebar (content pages)
2. With header, without sidebar (main page)
3. Without header and sidebar (registration/authentication page, 404)
+ In different pages different content of the sidebar (somewhere a filter, somewhere different widgets, etc.)

There is a react-router, now the App component looks something like this:

const App = () => (
 // ...
  <Switch>
    <Route exec path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    <Route path="/signin" component={AuthPage} />
  </Switch>
// ...
)

As a result, already in the component of the page itself, I build a Layout, connect a header, sidebar, footer, etc., which seems to me fundamentally wrong (the feeling that this is done wrong, there is another more correct approach, I can’t argue)

Tell me how they are usually done such things?

Answer 1

Throw out option 3 and it will be fine.
It's normal practice to use type 1 for the welcome page (registration/login) and workspace with some kind of pull-down menu and other bells and whistles.

Answer 2

Nested routes I guess.

<Route component={App} path="/">
  <Route component={Layout1} path="/">
    <Route component={View1} path="/view1"></Route>
    <Route component={View2} path="/view2"></Route>
  </Route>
  <Route component={Layout2} path="/">
    <Route component={View3} path="/view3"></Route>
    <Route component={View4} path="/view4"></Route>
  </Route>
</Route>

I really don't remember how it's written in react. This is how we solve the problem of layouts at Vue.