title: React Router 6.0 applying basename in nav/Link and the nav/Link disappears after switching route
body: <p>Got the basename solution from <a href="https://github.com/ReactTraining/react-router/issues/7664" rel="nofollow noreferrer">https://github.com/ReactTraining/react-router/issues/7664</a> for React-router v6.0 basename issue.</p>
  <p>With the basename in the Routes element wrapping the nav element, the nav element will disappear after clicking on the nav link. We need a way to have the nav receives a basename and stays on the page after changing route. In router 5.0, we can do that by setting basename in the BrowserRouter level. Is there a way to make the nav bar stays after changing route and applying the basename on the link in 6.0?</p>
  <pre><code>// url where new router is created: https://my-site/who/users
  const RootModule = () =&gt; {
    return (
      &lt;main&gt;
        &lt;BrowserRouter&gt;
          &lt;Routes basename=&quot;who/users&quot;&gt;
            &lt;nav&gt;
              &lt;Link to=&quot;&quot;&gt;Home&lt;/Link&gt;
              &lt;Link to=&quot;who/users/about&quot;&gt;About&lt;/Link&gt;
              &lt;Link to=&quot;who/users/users&quot;&gt;Users&lt;/Link&gt;
            &lt;/nav&gt;
            &lt;Routes&gt;
              &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
              &lt;Route path=&quot;who/users/about&quot; element={&lt;About /&gt;} /&gt;
              &lt;Route path=&quot;who/users/users&quot; element={&lt;Users /&gt;} /&gt;
            &lt;/Routes&gt;
          &lt;/Routes&gt;
        &lt;/BrowserRouter&gt;
      &lt;/main&gt;
    );
  };
  </code></pre>