Nested Routes in React Router v4

Question

I\'m trying to set up some nested routes to add a common layout. Check the code out:

Answer 1

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 you directly use .

Full code :

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.