title: React history.push requiring a forceRefresh
body: <p>I have implemented createBrowserHisotry according to this post <a href="https://stackoverflow.com/questions/42672842/how-to-get-history-on-react-router-v4">How to get history on react-router v4?</a>, however it only redirects if I set a configuration property to forceRefresh: true. If I do not  set any config properties, the url changes to the pushed url but the page will not redirect. Why?</p>
  
  <h3>INDEX.JS</h3>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import "./index.css";
  import App from "./components/App";
  import { Router } from 'react-router-dom'
  import registerServiceWorker from "./registerServiceWorker";
  import history from "./components/common/History";
  
  ReactDOM.render(&lt;Router history={history}&gt;&lt;App /&gt;&lt;/Router&gt;, 
  document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <h3>HISTORY.JS</h3>
  
  <pre><code>import createBrowserHistory from 'history/createBrowserHistory';
  
  // export default createBrowserHistory(); --&gt; This redirects the ### ### URL 
  // but does not physically redirect
  
  export default createBrowserHistory({
  //pass a configuration object here if needed
  forceRefresh: true
  });
  </code></pre>
  
  <h3>APP.JS</h3>
  
  <pre><code>class App extends Component {
  
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;OidcProvider store={store} userManager={userManager}&gt;
           &lt;Router&gt;
             &lt;div className="container-fluid"&gt;
              &lt;div&gt;
               &lt;Header /&gt;
              &lt;/div&gt;
             &lt;div&gt;
              &lt;Route exact path="/" render={props =&gt; &lt;LoginForm auth={this.auth} {...props} /&gt;} /&gt;
              &lt;Route exact path="/callback" render={props =&gt; &lt;Callback auth={this.auth} {...props} /&gt;} /&gt;
              &lt;Route exact path="/home" render={props =&gt; &lt;HomePage {...props} /&gt;} /&gt;
              &lt;Route exact path="/table" render={props =&gt; &lt;TableContainer {...props} /&gt;} /&gt;
              &lt;Route exact path="/form/:id" render={props =&gt; &lt;FormContainer id={this.props.params.id} {...props} /&gt;} /&gt;
              &lt;Route exact path="/form" render={props =&gt; &lt;FormContainer {...props} /&gt;} /&gt;
            &lt;/div&gt;
            &lt;Footer /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/OidcProvider&gt;
    &lt;/Provider&gt;
  );
  }
  }
  
   export default App;
  </code></pre>
  
  <h3>Another file calling history.push</h3>
  
  <pre><code>import history from "../components/common/History";
  
  class CallbackPage extends React.Component {
  render() {
      // just redirect to '/' in both cases
      return (
          &lt;CallbackComponent
              userManager={userManager}
              successCallback={() =&gt; history.push("/home")}
              errorCallback={error =&gt; {
                  history.push("/");
                  console.error(error);
              }}
          &gt;
              &lt;div&gt;Redirecting...&lt;/div&gt;
          &lt;/CallbackComponent&gt;
      );
     }
  }
  
  
  export default connect()(CallbackPage);
  </code></pre>