title: React Router v5: history.push() changes the address bar, but does not change the page
body: <p>I am trying to redirect a user to a new page if a login is successful in my React app. The redirect is called from the auth service which is not a component. To access the history object outside of my component I followed this example in the <a href="https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components" rel="nofollow noreferrer">React Router FAQ</a>. However, when I call <code>history.push('/pageafterlogin')</code>, the page is not changed and I remain on the login page (based on my <code>Switch</code> I would expect to end up on the <code>404</code> page). The URL in the address bar does get changed to <code>/pageafterlogin</code> but the page is not changed from the login page. No errors appear in the console or anything else to indicate my code does not work.</p>
  <p>How can I make <code>history.push()</code> also change the page the user is on?</p>
  <pre><code>// /src/history.js
  import { createBrowserHistory } from 'history';
  export default createBrowserHistory();
  
  // /src/App.js
  ...
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import history from './history';
  
  function App() {
      return (
          &lt;Router history={history}&gt;
              &lt;Switch&gt;
                  &lt;Route path=&quot;/&quot; exact component={HomePage} /&gt;
                  &lt;Route path=&quot;/login&quot; exact render={() =&gt; &lt;FormWrapper&gt;&lt;LoginForm /&gt;&lt;/FormWrapper&gt;} /&gt;
                  &lt;Route render={() =&gt; &lt;h1&gt;404: not found&lt;/h1&gt;} /&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
      );
  }
  
  export default App;
  
  // src/services/auth.service.js
  import axios from 'axios';
  import history from '../history';
  
  const API_URL = '...';
  
  class AuthService {
      login(username, password) {
          return axios.post(API_URL + 'login', {
              username,
              password
          }).then(res =&gt; {
              if (res.status === 200) {
                  localStorage.setItem('user', JSON.stringify(res.data));
                  history.push('/pageafterlogin');
              }
          });
      }
  }
  </code></pre>