title: ReactJS MobX and react-router v4 issue with url history
body: <p>I am making web-application with ReactJS, MobX, and react-router v4 and I have some problems with router history and redirections. 
  I am trying to redirect the user the home page when he will logout or login, and I am trying to implement this in my store. Here is the source code:</p>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>const APP = document.getElementById('app');
  
  render(
      (
          &lt;Provider {...stores} &gt;
              &lt;MuiThemeProvider&gt;
                &lt;Router history={history} &gt;
                    &lt;div&gt;
                      &lt;Routes /&gt;
                    &lt;/div&gt;
                &lt;/Router&gt;
              &lt;/MuiThemeProvider&gt;
          &lt;/Provider&gt;
      ) , APP);
  </code></pre>
  
  <p><strong>Routes.js</strong></p>
  
  <pre><code>@inject('userStore', 'commonStore')
  @withRouter
  @observer
  class Routes extends Component {
  
      render() {
  
          return (
              &lt;div&gt;
  
                      &lt;/div&gt;
                      &lt;switch&gt;
  
                          &lt;Route exact path="/create_listing" render={() =&gt;
                              (&lt;CreateListing store={clStore} /&gt;)}
                          /&gt;
  
                          &lt;Route path="/create_listing/description" render={() =&gt;(
                              &lt;CLLayout store={clStore} /&gt;
                          )}/&gt;
  
                          &lt;Route path="/create_listing/amenities" render={() =&gt;(
                              &lt;CLLayout store={clStore} /&gt;
                          )}/&gt;
  
                          &lt;Route path="/create_listing/optional" render={() =&gt;(
                              &lt;CLLayout store={clStore} /&gt;
                          )}/&gt;
  
                          &lt;Route path="/create_listing/media" render={() =&gt;(
                              &lt;CLLayout store={clStore} /&gt;
                          )}/&gt;
  
                          &lt;Route path="/create_listing/preview" render={() =&gt;(
                              &lt;CLLayout store={clStore} /&gt;
                          )}/&gt;
  
                          &lt;Route path="/create_listing/done" render={() =&gt;(
                              &lt;CLLayout store={clStore} /&gt;
                          )}/&gt;
  
                          &lt;Route exact path="/" component={ FrontPageIndex }/&gt;
                      &lt;/switch&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  export default Routes;
  </code></pre>
  
  <p><strong>history.js</strong></p>
  
  <pre><code>import createBrowserHistory from 'history/createBrowserHistory';
  import createMemoryHistory from 'history/createMemoryHistory';
  
  export default process.env.BROWSER? createBrowserHistory() : createMemoryHistory();
  </code></pre>
  
  <p><strong>store.js</strong></p>
  
  <pre><code>@action logout() {
          return agent.Auth.logout()
              .catch(action((err) =&gt; {
                  this.errors = err.response &amp;&amp; err.response.body &amp;&amp; err.response.body.errors;
                  throw err;
              }))
              .finally(action(() =&gt; {
                  commonStore.setToken({});
                  userStore.forgetUser();
                  this.inProgress = false;
                  history.replace('/');
              }));
      }
  </code></pre>
  
  <p>The method history.replace('/'); actually, replaces the URL in the browser, but doesn't render the new component ( the home component ), to do so I should refresh the webpage manually.</p>
  
  <p>Any suggestions on this? </p>