title: React Router V4 is updating URL, but not refreshing (React, Redux)
body: <p>I am trying to use React-Router V4 to add routes to my app, but it is not working at all. Basically, I'm trying to programatically change the route with <code>history.push</code>, which is updating the browser URL, but not changing anything inside the actual app.</p>
  
  <p>NOTE: I am using redux.</p>
  
  <p>The only answered question on this issue is:</p>
  
  <p><a href="https://stackoverflow.com/questions/42941708/react-history-push-is-updating-url-but-not-navigating-to-it-in-browser">React history.push() is updating url but not navigating to it in browser</a></p>
  
  <p>However, I've tried the answer to the above question, and it doesn't work for me.</p>
  
  <p>Here are the important snippets:</p>
  
  <p><strong>Topmost file (index.js)</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>...
  ReactDOM.render(
      &lt;BrowserRouter&gt;
          &lt;Provider store={store}&gt;
              &lt;App/&gt;
          &lt;/Provider&gt;
      &lt;/BrowserRouter&gt;
      , document.getElementById('root'));
  ...</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Component containing routes</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>...
  export default function ContentRouter() {
      return &lt;div className="content"&gt;
          &lt;Route exact path="/dashboard" component={TmpDashboard}/&gt;
          &lt;Route exact path="/" component={() =&gt; {
              return &lt;h1&gt;Home&lt;/h1&gt;
          }}/&gt;
      &lt;/div&gt;
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Component pushing routes</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>...
  this.handleGroupClick = (group) =&gt; {
      this.props.history.push(`/groups/${group}`);
      this.props.onOpenChange(false);
  };
  ...
  export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))</code></pre>
  </div>
  </div>
  </p>