Nested Routes in React Router v4

CESCO’s answer renders first the component AppShell then one of the components inside Switch. But these components are NOT going to render inside AppShell, they will NOT be children of AppShell.

In v4 to wrap components you don’t put anymore your Routes inside another Route, you put your Routes directly inside a component.
I.E : for the wrapper instead of <Route component={Layout}> you directly use <Layout>.

Full code :

  <Router>
    <Layout>
      <Route path="/abc" component={ABC} />
      <Route path="/xyz" component={XYZ} />
    </Layout>
  </Router>

The change is probably explained by the idea to make React Router v4 to be pure
React so you only use React elements like with any other React element.

EDIT : I removed the Switch component as it’s not useful here. See when it’s useful here.