title: React router dom not working with Link, but refreshing the page loads the component
body: <p>I've got a create-react-app with a couple of routes. Every now and then as I change branches etc, I notice routing doesn't work. I reckon the only time it has worked its because of caching.</p>
  <p>Below are my routes, I've replaced the <code>blog</code> route with a simple <code>p</code> tag for simplicity as I began to think it was relating to the component I was linking to.</p>
  <p>App.tsx</p>
  <pre><code>const history = createBrowserHistory();
  ...
  &lt;Router history={history} data-test=&quot;component-app&quot;&gt;
     &lt;Switch&gt;
        &lt;Route exact path=&quot;/&quot; component={Main} /&gt;
        &lt;Route path=&quot;/blog&quot;&gt;
           &lt;p&gt;test&lt;/p&gt;
        &lt;/Route&gt;
     &lt;/Switch
  &lt;/Router&gt;
  
  </code></pre>
  <p>Main.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  export const Main = () =&gt; {
  
      return (
          &lt;Link to=&quot;/blog&quot;&gt;Blog&lt;/Link&gt;
      )
  }
  
  </code></pre>
  <p>Here's what happens:</p>
  <ul>
  <li>Click on Blog link in Main = route in browser changes to localhost:9600/blog BUT there's no content, just a white page</li>
  <li>Refresh the page whilst on localhost:9600/blog and you get the <code>&lt;p&gt;test&lt;/p&gt;</code> part</li>
  </ul>
  <p>But why isn't it showing test as soon as you click on the link?</p>
  <p>Versions I'm using:</p>
  <ul>
  <li>react-router-dom: &quot;^5.2.0&quot;</li>
  <li>react-scripts: &quot;4.0.1&quot;</li>
  <li>react: &quot;^17.0.1&quot;</li>
  <li>history: &quot;^5.0.0&quot;</li>
  </ul>
  <p>Any ideas?</p>