title: How to pass in children to parent <Route> component
body: <p>I'd like to define the following structure on my page:</p>
  
  <p><a href="https://i.stack.imgur.com/QrnLR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QrnLR.png" alt="enter image description here"></a></p>
  
  <p>Where <strong>layout</strong> is static and contains elements that appear on every page, and render <strong>page content</strong> based on the URL.</p>
  
  <p>To achieve this I've defined <code>AppRoutes</code>, <code>Layout</code>, <code>About</code> and <code>NotFound</code> and used <code>react-router</code>, <code>v4</code>:</p>
  
  <p>AppRoutes.js</p>
  
  <pre><code>export default class AppRoutes extends React.Component
  {  
      render ()
      {
          const supportsHistory = 'pushState' in window.history;
          return (
          &lt;BrowserRouter forceRefresh={!supportsHistory} history={hashHistory} onUpdate={() =&gt; window.scrollTo(0, 0)}&gt;
              &lt;div&gt;
                  &lt;Route path='/' component={Layout}&gt;
                      &lt;Route path='/about' component={About}/&gt;
                      &lt;Route path='*' component={PageNotFround}/&gt;
                  &lt;/Route&gt;
              &lt;/div&gt;
          &lt;/BrowserRouter&gt;);
      };
  };
  </code></pre>
  
  <p>Layout.js</p>
  
  <pre><code>class NaviGationPane extends React.Component
  {
      render()
      {
          return (
              &lt;div&gt;
                  &lt;NavLink to="/"&gt;Home&lt;/NavLink&gt;
                  &lt;NavLink to="/about"&gt;About&lt;/NavLink&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default class Layout extends React.Component
  {
      render ()
      {
          return (
          &lt;div className="app-container"&gt;
              &lt;header&gt;
                  &lt;NaviGationPane/&gt;
              &lt;/header&gt;
              &lt;div className="app-content"&gt;
                  {this.props.children}
              &lt;/div&gt;
          &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Layout's header is rendered, but at <code>/</code> or at <code>/about</code> the <em>page content</em> is empty.
  If I change it to the one below the <code>PageNotFound</code> is rendered always at the end, no matter what is the path, while the rest works as I expected, namely <code>/</code> renders he <code>Layout</code>, while <code>/about</code> renders the <code>About</code> component.</p>
  
  <pre><code>&lt;BrowserRouter forceRefresh={!supportsHistory} history={hashHistory} onUpdate={() =&gt; window.scrollTo(0, 0)}&gt;
                  &lt;div&gt;
                      &lt;Route path='/' component={Layout}/&gt;
                      &lt;Route path='/about' component={About}/&gt;
                      &lt;Route path='*' component={PageNotFround}/&gt;
                  &lt;/div&gt;
              &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>I checked that in both cases <code>this.props.children</code> in <code>Layout</code> is undefined.</p>
  
  <p><strong>UPDATE</strong>
  I tried out a few things and figured that</p>
  
  <pre><code> &lt;Layout&gt;
       &lt;Switch&gt;
           &lt;Route exact path='/' component={IndexPage}/&gt;
           &lt;Route path='/about' component={About}/&gt;
           &lt;Route component={PageNotFround}/&gt;
        &lt;/Switch&gt;
   &lt;/Layout&gt;
  </code></pre>
  
  <p>will be the basic scenario and now I understand why my previous code did not work: in <code>react-router</code> v4 the </p>
  
  <pre><code>&lt;Route to='/' component={Layout}&gt;
         &lt;Route path='/about' component={About}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>is not valid. The structure</p>
  
  <pre><code>&lt;BrowserRouter&gt;
        &lt;div&gt;
           &lt;Route path='/' component={Layout}&gt;
           &lt;Route path='/about' component={About}/&gt;
           &lt;Route path='*' component={PageNotFround}/&gt;
        &lt;/div&gt;
   &lt;/BrowserRouter&gt; 
  </code></pre>
  
  <p>will keep matching routes until all rules are exhausted, the <code>/</code> will be matched every time and <code>*</code> will also be matched every time.</p>
  
  <p>So I use the <code>&lt;Layout&gt;</code> component to wrap everything and create the routes inside and to ensure that only one path is matched I use the <code>&lt;Switch&gt;</code>.</p>
  
  <p>This is not what I wanted, because if I add a path <code>/about/:user</code> only the <code>About</code> component will be rendered. So the question is still open.</p>