title: React - Wrong component rendering after calling history.push
body: <p>I have a pretty basic app with just a few pages: home, login and dashboard. The goal is for a user to successfully login and be navigated to the dashboard. Currently after I click the login form the <code>url/path</code> update in the browser to <code>/dashboard</code>, but I still see the <code>auth</code> component. I can only see the dashboard component if I do a refresh in the browser. What am I doing wrong?</p>
  
  <p><a href="https://stackblitz.com/edit/react-scqvhp" rel="nofollow noreferrer">https://stackblitz.com/edit/react-scqvhp</a></p>
  
  <pre><code>"react": "^16.11.0",
  "react-dom": "^16.11.0",
  "react-router-dom": "^5.1.2",
  "react-scripts": "3.2.0"
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>export default function App() {
    return (
      &lt;Router&gt;
        &lt;div className="App"&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/"&gt;
                &lt;Home /&gt;
              &lt;/Route&gt;
              &lt;Route path="/auth"&gt;
                &lt;Auth /&gt;
              &lt;/Route&gt;
              &lt;Route path="/dashboard"&gt;
                &lt;Dashboard /&gt;
              &lt;/Route&gt;
            &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  
  <p>Auth.js</p>
  
  <pre><code>export default function Auth() {
    let match = useRouteMatch();
  
    return (
      &lt;div className="d-flex align-items-center bg-auth border-top border-top-2 border-primary vh-100"&gt;
        &lt;div className="container"&gt;
          &lt;div className="row justify-content-center"&gt;
            &lt;div className="col-12 col-md-5 col-xl-4 my-5"&gt;
              &lt;p&gt;Auth&lt;/p&gt;
              &lt;Router&gt;
                &lt;Route path={`${match.path}/login`}&gt;&lt;Login /&gt;&lt;/Route&gt;
              &lt;/Router&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>export default function Login() {
    let history = useHistory();
  
    const submit = (e) =&gt; {
      e.preventDefault();
  
      history.push('/dashboard');
    };
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={submit}  data-op-form-id="0"&gt;
          &lt;div className="form-group"&gt;
            &lt;label&gt;Email Address&lt;/label&gt;
            &lt;input type="email" className="form-control" placeholder="name@address.com" /&gt;
          &lt;/div&gt;
          &lt;div className="form-group"&gt;
            &lt;div className="row"&gt;
              &lt;div className="col"&gt;
                &lt;label&gt;Password&lt;/label&gt;
              &lt;/div&gt;
              &lt;div className="col-auto"&gt;
                &lt;a href="#" className="form-text small text-muted"&gt;
                  Forgot password?
                &lt;/a&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="input-group input-group-merge"&gt;
              &lt;input type="password" className="form-control form-control-appended" placeholder="Enter your password" /&gt;
              &lt;div className="input-group-append"&gt;
                    &lt;span className="input-group-text"&gt;
                      &lt;Eye/&gt;
                    &lt;/span&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;button className="btn btn-lg btn-block btn-primary mb-3"&gt;Sign in&lt;/button&gt;
          &lt;div className="text-center"&gt;
            &lt;small className="text-muted text-center"&gt;Don't have an account yet? &lt;a href="#"&gt;Sign up&lt;/a&gt;.&lt;/small&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Dashboard.js</p>
  
  <pre><code>export default function Dashboard() {
    return (
      &lt;div&gt;
        &lt;Sidebar/&gt;
        &lt;p&gt;Dashboard&lt;/p&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>