title: history.push reloads the whole page even though the pathname is the same when using code-splitting
body: <p>My initial question was</p>
  <blockquote>
  <p>How to add url params without the whole page reloading?</p>
  </blockquote>
  <p>@Ajeet Shah told me in the comments that the page shouldn't reload if the pathname is the same. So I figured the problem lies elsewhere. I could pin point the problem and found out it has to do with code splitting, I could even create a reproducible example <a href="https://codesandbox.io/s/react-router-basic-forked-2xvp1" rel="nofollow noreferrer">here</a>.</p>
  <p>The problem is the following: When part of the code is loaded asynchronously and it contains routes, calls to <code>history.push()</code> with the exact same pathname make the page reload.</p>
  <p><strong>example.js</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { BrowserRouter as Router, Switch, Route, Link } from &quot;react-router-dom&quot;;
  import AsyncComponent from &quot;./components/AsyncComponent&quot;;
  
  export default function BasicExample() {
    return (
      &lt;Router&gt;
        &lt;div&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to=&quot;/about/test&quot;&gt;About&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;hr /&gt;
  
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              &lt;Home /&gt;
            &lt;/Route&gt;
            &lt;Route path=&quot;/about&quot;&gt;
              &lt;AsyncComponent /&gt;
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  function Home() {
    return (
      &lt;div&gt;
        &lt;h2&gt;Home&lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p><strong>AsyncComponent.jsx</strong></p>
  <pre><code>import React, { Suspense } from &quot;react&quot;;
  
  const Component = React.lazy(() =&gt; import(&quot;./Routes&quot;));
  
  export const AsyncComponent = (props) =&gt; {
    return (
      &lt;Suspense fallback={&lt;div&gt;...loading&lt;/div&gt;}&gt;
        &lt;Component /&gt;
      &lt;/Suspense&gt;
    );
  };
  
  export default AsyncComponent;
  </code></pre>
  <p><strong>Routes.jsx</strong></p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { Switch, Route } from &quot;react-router-dom&quot;;
  import { useRouteMatch } from &quot;react-router&quot;;
  import About from &quot;./About&quot;;
  
  export const Routes = (props) =&gt; {
    let { path } = useRouteMatch();
    console.log(&quot;rendering Routes&quot;);
  
    useEffect(() =&gt; {
      console.log(&quot;mounting Routes&quot;);
    }, []);
  
    return (
      &lt;Switch&gt;
        &lt;Route exact path={`${path}/test`}&gt;
          &lt;About /&gt;
        &lt;/Route&gt;
      &lt;/Switch&gt;
    );
  };
  
  export default Routes;
  </code></pre>
  <p><strong>About.jsx</strong></p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import { useHistory } from &quot;react-router&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  
  export const About = () =&gt; {
    console.log(&quot;rendering About&quot;);
  
    useEffect(() =&gt; {
      console.log(&quot;mounting About&quot;);
    }, []);
  
    const h = useHistory();
  
    return (
      &lt;div&gt;
        &lt;Link
          to={{
            pathname: &quot;/about/test&quot;,
            search: &quot;foo=1&amp;bar=2&quot;
          }}
        &gt;
          Push search params to About
        &lt;/Link&gt;
  
        &lt;button
          onClick={() =&gt; {
            h.push({
              pathname: &quot;/about/test&quot;,
              search: &quot;foo=1&amp;bar=2&quot;
            });
          }}
        &gt;
          Push search params to About
        &lt;/button&gt;
  
        &lt;h2&gt;About&lt;/h2&gt;
      &lt;/div&gt;
    );
  };
  
  export default About;
  </code></pre>
  <p>What am I doing wrong? Is there a way to avoid this while keeping code-splitting?</p>