React Router v4 nested routes props.children : <p>I'm updating my universal react redux app to use react router v4. I have nested routes under a main layout route. Previously I used {props.children} to show contents of child routes, but this doesn't work anymore. How does this work in V4? </p>

<pre><code>&lt;Provider store={store} key="provider"&gt;
  &lt;div&gt;
    &lt;Route component={Layout} /&gt;
    &lt;Switch&gt;
      &lt;Route path="/" component={HomePage} /&gt;
      &lt;Route component={Error404} /&gt;
    &lt;/Switch&gt;
  &lt;/div&gt;
&lt;/Provider&gt;
</code></pre>

<p>or </p>

<pre><code>&lt;Provider store={store} key="provider"&gt;
  &lt;Layout&gt;
    &lt;Route path="/" component={HomePage} /&gt;
    &lt;Route component={Error404} /&gt;
  &lt;/Layout&gt;
&lt;/Provider&gt;
</code></pre>

<p>This is how my Layout file looks</p>

<pre><code>const Layout = props =&gt; (
 &lt;div className="o-container"&gt;
   &lt;Header /&gt;
     &lt;main&gt;
      {props.children}
     &lt;/main&gt;
   &lt;Footer /&gt;
 &lt;/div&gt;
);
</code></pre>
