How to make sidebar optional in react-router?

Question

React

I look in the dock how to make a sidebar https://reacttraining.com/react-router/web/example...
If I understood everything correctly, then such a sidebar will be on every page. I need some pages to have no sidebar. How can this be done?

Answer 1

You can make 2 different "markups", so to speak. One has a sidebar, the other doesn't.
2 different layouts = 2 different components (route with sidebar, route without sidebar).
Wrap the child routes in a route-with-sidebar, or a route-without-sidebar and draw the pattern you want + this.props.children. Nesting of routes into each other is any, thus it is possible to further complicate the logic of drawing the template.
ps 4th version of the route has not yet looked. But I use this solution with version 3, I think it’s the same in version 4, or they came up with an even more convenient one.
pps The filtering theme suggested by Aves also works.
(example, getComponent is used - this is for dynamic loading)

<Route path='/reports' component={AuthenticatedContainer} onEnter={_ensureAuthenticated}>
  <Route getComponent={() => def(import('../containers/WiwthSidebar'))}>
    <Route path='/reports/a' getComponent={() => def(import('../containers/A'))} />
    <Route path='/reports/b' getComponent={() => def(import('../containers/B'))} />
  </Route>
  <Route getComponent={() => def(import('../containers/WithoutSideber'))}>
    <Route path='/reports/c' getComponent={() => def(import('../containers/C'))} />
  </Route>
</Route>