title: React Router v5 nested routes not found
body: <p>I'm having problems trying to make a simple setup to run. I have used "react-router-dom" because it claims to be the most documented router around.
  Unfortunately, the documentation samples are using functions instead of classes and I think a running sample will not explain how routes have changed from previous versions... you need a good sight!. Btw, there are a lot of breaking changes between versions.</p>
  
  <p>I want the following component structure:</p>
  
  <ul>
  <li>Home
  
  <ul>
  <li>Login</li>
  <li>Register</li>
  </ul></li>
  <li>Recipes</li>
  <li>Ingredients</li>
  </ul>
  
  <p>Have the following components:</p>
  
  <p>index.js (works fine)</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter, Route } from 'react-router-dom';
  import App from './App';
  
  ReactDOM.render((
      &lt;BrowserRouter&gt;
          &lt;Route component={App}/&gt;
      &lt;/BrowserRouter&gt;
  ), document.getElementById('root'));
  </code></pre>
  
  <p>App.js (fine)</p>
  
  <pre><code>import React from 'react';
  import { Route, Switch } from 'react-router-dom';
  import Home from './Home'
  import Recipes from './recipes/Recipes'
  import Ingredients from './ingredients/Ingredients'
  
  class App extends React.Component {
      render() {
          return (
              &lt;div id="App"&gt;
                  &lt;Switch&gt;
                      &lt;Route exact path='/home' component={Home} /&gt;
                      &lt;Route path='/recipes' component={Recipes} /&gt;
                      &lt;Route path='/ingredients' component={Ingredients} /&gt;
                      &lt;Route render={() =&gt; &lt;h1&gt;Not found!&lt;/h1&gt;} /&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
      );
    }
  }
  
  export default YanuqApp;
  </code></pre>
  
  <p>Ingredients and Recipes components working fine, so I'll skip from here</p>
  
  <p>Home.js - The problem starts here. Home itself loads correctly, but once Login or Register links are clicked, it shows "Not found!" (fallback route in App.js)</p>
  
  <pre><code>import React from 'react';
  import { Switch, Route, Link } from 'react-router-dom';
  import Register from './account/register'
  import Login from './account/login'
  
  class Home extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;div&gt;
                      This is the home page...&lt;br/&gt;
                      &lt;Link to='/home/login'&gt;Login&lt;/Link&gt;&lt;br /&gt;
                      &lt;Link to='/home/register'&gt;Register&lt;/Link&gt;&lt;br /&gt;
                  &lt;/div&gt;
                  &lt;Switch&gt;
                      &lt;Route path='/home/login' component={Login} /&gt;
                      &lt;Route path='/home/register' component={Register} /&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default Home;
  </code></pre>
  
  <p>Login and register are very similar:</p>
  
  <pre><code>import React from 'react';
  
  class Login extends React.Component {
      render() {
          alert("login");
          return (
              &lt;div&gt;Login goes here...&lt;/div&gt;
          );
      }
  }
  
  export default Login;
  </code></pre>
  
  <p>And cannot figure why Login and Register are not found. I have tried also defining routes as:</p>
  
  <pre><code>&lt;Link to={`${match.path}/register`}&gt;Register&lt;/Link&gt;
  ...
  &lt;Route path={`${match.path}/register`} component={Register} /&gt;
  </code></pre>
  
  <p>(don't see the gain on using match, as it renders as the expected "/home/register"), but the problem persists in identical way</p>