title: React Router v4 nested routes props.children
body: <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>