title: useNavigate doesn't load page when navigating between siblings component
body: <p>I'm working at a react-js app using react-router-dom v6</p>
  <p>I try to simplify my framework to make it clearer.</p>
  <p><strong>MainRouter.js</strong></p>
  <pre><code>&lt;BrowserRouter&gt;
    &lt;NavBar/&gt;
    &lt;Routes&gt;     
        &lt;Route exact path=&quot;/&quot;  element={&lt;HomePage/&gt;}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;item&quot;  element={&lt;ShowItem/&gt;}&gt;
          &lt;Route path=&quot;:itemId&quot;  element={&lt;ShowItem/&gt;}&gt;
          &lt;/Route&gt;
        &lt;/Route&gt;
    &lt;/Routes&gt;
  </code></pre>
    
  <p>The navbar includes a search bar s.t. I'm able to search different items: &quot;item/1&quot;, &quot;item/2&quot;, ... For sake of semplicity, I replace the search bar with a button which try to redirect always to item 12</p>
  <p><strong>NavBsr.js</strong></p>
  <pre><code>return (
      [...]
      &lt;button onClick={()=&gt;navigate(&quot;/item/12&quot;)}&gt;Click&lt;/button&gt;
  );
  </code></pre>
  <p>If I'm in any page but &quot;item/*&quot;, the navigation works as expected. Ex. if I'm at &quot;homepage&quot;, the button redirects to &quot;item/12&quot;</p>
  <p>However, the strange behaviour happens if my current page is &quot;item/*&quot;, ex. &quot;item/1&quot;. In this case, if I press the button the url changes to &quot;item/12&quot; but the content doesn't load: the correct content is loaded only if I manually refresh the page</p>
  <p>Thanks for any suggestion</p>