title: history.push only updates the URL when using BrowserRouter in react application
body: <p>I know this issue has been discussed before. But, somehow I cannot get it work in my application.</p>
  
  <p>Normally, the navigation works fine between components. However, history.push only changes the url but does not update the content. For example, in the Login page, I want to navigate user to Home page if already logged in. But, the code only updates the url. Any ideas?</p>
  
  <pre><code>const Login = () =&gt; {
  
      useEffect(() =&gt; {
          if (authenticationService.currentUserValue != null) {
              history.push('/home');
          }
      }, [])
  
      //other code
  }
  </code></pre>
  
  <p>In index.js, I have the following</p>
  
  <pre><code>&lt;BrowserRouter basename={baseUrl} history={history}&gt;
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;
  &lt;/BrowserRouter &gt;,
  </code></pre>
  
  <p>In app.js, I have:</p>
  
  <pre><code>&lt;Layout&gt;
      &lt;Switch&gt;
          &lt;PrivateRoute exact path="/home" component={withRouter(Home)} /&gt;
          &lt;Route exact path='/home' component={withRouter(Home)} /&gt;
          &lt;Route exact path='/login' component={Login} /&gt;
          &lt;Route exact path='/register' component={withRouter(Register)} /&gt;
      &lt;/Switch&gt;
  &lt;/Layout&gt;
  </code></pre>