title: React Router v5 - How to force a route to always re-render when location changes?
body: <p>Consider this <a href="https://codesandbox.io/s/vigorous-water-2fuxt?file=/src/App.js" rel="nofollow noreferrer">codesandbox</a> example.</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./styles.css&quot;;
  import { BrowserRouter as Router, Route, Link } from &quot;react-router-dom&quot;;
  
  const Foo = () =&gt; {
    console.log(&quot;rendered&quot;);
    return null;
  };
  
  export default function App() {
    return (
      &lt;Router&gt;
        &lt;Route&gt;
          &lt;Foo /&gt;
        &lt;/Route&gt;
        &lt;div className=&quot;App&quot;&gt;
          &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
          &lt;br /&gt;
          &lt;Link to=&quot;/foo&quot;&gt;Foo&lt;/Link&gt;
  
          &lt;Route path=&quot;/&quot; exact&gt;
            &lt;p&gt;Home&lt;/p&gt;
          &lt;/Route&gt;
          &lt;Route path=&quot;/foo&quot;&gt;
            &lt;p&gt;Foo&lt;/p&gt;
          &lt;/Route&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  <p>Currently, when clicking on a <code>&lt;Link /&gt;</code> to change the location, the <code>&lt;Foo /&gt;</code> component never re-renders. How can we force a re-render when the location changes?</p>