title: react-router v4 route within route doesn't work
body: <p>this is my app.js</p>
  
  <pre><code>render(){
  return(
  &lt;BrowserRouter&gt;
      &lt;div&gt;
          &lt;Switch&gt;
          &lt;Route exact path='/dashboard' component={Dashboard} /&gt;
          &lt;/Switch&gt;
      &lt;/div&gt;
  &lt;/BrowserRouter&gt;)
  }
  </code></pre>
  
  <p>then within the dashboard component I have another routes</p>
  
  <pre><code>render(){
     return(
              &lt;div&gt;
                  &lt;Navbar /&gt;
                  &lt;Container&gt;
              &lt;Switch&gt;
                &lt;Route path='/' component={()=&gt;&lt;UserArea /&gt;} /&gt;
                &lt;Route path='/testing' component={()=&gt;&lt;p&gt;testing&lt;/p&gt;} /&gt;
              &lt;/Switch&gt;
                  &lt;/Container&gt;
              &lt;/div&gt;
     )
  }
  </code></pre>
  
  <p>The strange thing is it need to return to supply the component. <code>&lt;UserArea /&gt;</code> worked when I visit localhost:3000/dashboard, which is expected but it doesn't work when I do <code>localhost:3000/dashboard/testing</code>. I see no error just blank on the screen.</p>
  
  <p>I've create a mini miniature here <a href="https://codesandbox.io/s/3xwqoowm5m" rel="nofollow noreferrer">https://codesandbox.io/s/3xwqoowm5m</a></p>
  
  <p>add /home in the end of the url above.</p>
  
  <p><strong>EDIT:</strong>
  This problem is solved: <a href="https://codesandbox.io/s/j7pp98lz2y" rel="nofollow noreferrer">https://codesandbox.io/s/j7pp98lz2y</a></p>