title: React Router nested routing in the base url
body: <p>I modified the sample given in React Router nested routing in the <a href="https://reacttraining.com/react-router/web/example/nesting" rel="nofollow noreferrer">docs</a> to setup nested routing in the base url, like <a href="https://codesandbox.io/s/react-router-nesting-164ih" rel="nofollow noreferrer">this</a>.</p>
  
  <p>I want nested routing like <code>/Home1</code>  and <code>/Home2</code>  directly under the root url.</p>
  
  <pre class="lang-js prettyprint-override"><code>export default function NestingExample() {
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to="/"&gt;Home&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to="/topics"&gt;Topics&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;hr /&gt;
          &lt;Switch&gt;
            &lt;Route exact path="/"&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
            &lt;Route path="/topics"&gt;
              &lt;Topics /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  function Home() {
    let { path, url } = useRouteMatch();
    console.log({url, path});
  
    return (
      &lt;div&gt;
        &lt;h2&gt;Homes&lt;/h2&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;Link to="/home1"&gt;Home 1&lt;/Link&gt; 
            {/* also tried   &lt;Link to={`${url}/home1`}&gt;Home 1&lt;/Link&gt; */}
          &lt;/li&gt;
          &lt;li&gt;
          &lt;Link to="/home2"&gt;Home 2&lt;/Link&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;Switch&gt;
          &lt;Route exact path={path}&gt;
            &lt;h3&gt;Please select a home.&lt;/h3&gt;
          &lt;/Route&gt;
          &lt;Route path={`${path}/home1`}&gt;
            &lt;Home1 /&gt;
          &lt;/Route&gt;
          &lt;Route path={`${path}/home2`}&gt;
            &lt;Home2 /&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
    );
  }
  
  function Home1() {
    return (
      &lt;div&gt;
        &lt;h3&gt;Home1 Content&lt;/h3&gt;
      &lt;/div&gt;
    );
  }
  
  function Home2() {
    return (
      &lt;div&gt;
        &lt;h3&gt;Home2 Content&lt;/h3&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>No error displays in the browser, but Home1 page does not display. 
  Isn't it possible to setup nested routing directly under the root?</p>