title: Why can I not nest Route components in react-router 4.x?
body: <p>How in the world does one use nested routes in <a href="https://github.com/ReactTraining/react-router" rel="nofollow noreferrer">react-router</a>, specifically, version 4.x? The following worked well in previous versions...</p>
  
  <pre><code>&lt;Route path='/stuff' component={Stuff}&gt;
    &lt;Route path='/stuff/a' component={StuffA} /&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>Upgrading to 4.x throws the following warning...</p>
  
  <blockquote>
    <p>Warning: You should not use &lt;Route&gt; component and &lt;Route children&gt; in the same route; &lt;Route children&gt; will be ignored</p>
  </blockquote>
  
  <p>What in the heck is going on here? I've scoured <a href="https://reacttraining.com/react-router/web/api/" rel="nofollow noreferrer">the docs</a> for hours and can not successfully get nested routes working. How does one use <code>&lt;Route&gt;</code><em>components</em> to nest their routes in react-router v4? How does my simplistic example translate to v4.x API compliance to nest a route?</p>