title: react-router V6 "url changes but component does not render"
body: <p>Despite checking all the answers already posted on stack overflow I coudn't find the solution for my case, so I'll post it.</p>
  <p>I'm using <strong>{Router} from 'react-router (v6)</strong> to be able to use a custom history object to be able to  navigate in my redux actions.</p>
  <p>Here are my files:</p>
  <p><em>index.tsx</em></p>
  <pre><code>import { Router } from 'react-router';
  import myHistory from './utils/history';
  
  ReactDOM.render(
     &lt;Provider store={store}&gt;
        &lt;Router navigator={myHistory} location={myHistory.location}&gt;
           &lt;App /&gt;
        &lt;/Router&gt;
     &lt;/Provider&gt;,
     document.getElementById('root')
  );
  </code></pre>
  <p><em>App.tsx</em></p>
  <pre><code>import MainNavigation from './components/navigations/MainNavigation';
  import Routes from './routes/Routes';
  
  const App = () =&gt; {
     return (
        &lt;&gt;
           &lt;MainNavigation /&gt;
           &lt;Routes /&gt;
        &lt;/&gt;
     );
  };
  
  export default App;
  </code></pre>
  <p><em>MainNavigation.tsx</em></p>
  <pre><code>import { Link } from 'react-router-dom';
  
  const MainNavigation = () =&gt; {
     return (
        &lt;nav className='navigation'&gt;
           &lt;ul&gt;
              &lt;li&gt;
                 &lt;Link to='/'&gt;Home&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                 &lt;Link to='/contact'&gt;Contact&lt;/Link&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                 &lt;Link to='/about'&gt;A propos&lt;/Link&gt;
              &lt;/li&gt;
  
              &lt;li&gt;
                 &lt;Link to='/user-profile'&gt;Votre compte&lt;/Link&gt;
              &lt;/li&gt;
           &lt;/ul&gt;
        &lt;/nav&gt;
     );
  };
  
  export default MainNavigation;
  </code></pre>
  <p><em>Route.ts</em></p>
  <pre><code>import { Route, Routes as Routing } from 'react-router';
  
  const Routes = () =&gt; {
     return (
        &lt;Routing&gt;
           &lt;Route path='/' element={&lt;Home /&gt;} /&gt;
           &lt;Route path='/about' element={&lt;About /&gt;} /&gt;
           &lt;Route path='/contact' element={&lt;ContactForm /&gt;} /&gt;
           &lt;Route path='/user-profile' element={&lt;UserAccount /&gt;} /&gt;
           {/* &lt;Route path='*' component={Error404} /&gt; */}
           {/* &lt;Navigate to='/' /&gt; */}
        &lt;/Routing&gt;
     );
  };
  
  export default Routes;
  </code></pre>
  <p><strong>The issue:</strong> when I click on one of the link the url changes to the corresponding path but the component doesn't render. I have to refresh the page to actually make it appear. I really don't know what's going on.</p>
  <p>Thank you.</p>