title: React Router v4 with multiple layouts
body: <p>I'd like to render some of my routes within my public layout, and some other routes within my private layout, is there a clean way to do this?</p>
  
  <p>Example that obviously doesn't work, but I hope explains roughly what I'm looking for:</p>
  
  <pre><code>&lt;Router&gt;
  
    &lt;PublicLayout&gt;
      &lt;Switch&gt;
        &lt;Route exact path="/" component={HomePage} /&gt;
        &lt;Route exact path="/about" component={AboutPage} /&gt;
      &lt;/Switch&gt;
    &lt;/PublicLayout&gt;
  
    &lt;PrivateLayout&gt;
      &lt;Switch&gt;
        &lt;Route exact path="/profile" component={ProfilePage} /&gt;
        &lt;Route exact path="/dashboard" component={DashboardPage} /&gt;
      &lt;/Switch&gt;
    &lt;/PrivateLayout&gt;
  
  &lt;/Router&gt;
  </code></pre>
  
  <p>I'd like the layout to switch for certain routes, how do I do this with the new react router?</p>
  
  <p>Nesting routes no longer works and gives me this error:</p>
  
  <pre><code>You should not use &lt;Route component&gt; and &lt;Route children&gt; in the same route; &lt;Route children&gt; will be ignored
  </code></pre>
  
  <p>Edit: Having layouts wrap entire groups of routes also means those layouts are only rendered once as long as you stay in the same private/public group of routes. This is a big deal if your layout has to fetch something from your server for example, as that would happen on every page change if you wrap each page with a layout.</p>