title: ReactJS router v4 Mobx - Router wont re-render components?
body: <p>I use mobx <code>Provider</code> to provide stores, by wrapping the <code>Router</code></p>
  
  <pre><code>  &lt;Provider {...stores}&gt;
      &lt;BrowserRouter &gt;
      &lt;App /&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
  </code></pre>
  
  <p>In <code>App</code> I have two components, <code>Header</code> and <code>Main</code>.
  <code>Header</code> contains <code>Link</code> to the routes and <code>Main</code> contains the routes <code>Switch</code>:</p>
  
  <pre><code>  &lt;div className="main"&gt;
        &lt;Route exact path='/' component={Home} /&gt;
        &lt;Route exact path='/login' component={Login} /&gt;
        {/* &lt;UnvalidatedUserRoute exact path='/login' store={this.props.User} component={Login} /&gt; */}
        &lt;ValidatedUserRoute exact path='/todos' store={this.props.User} component={UserTodos} /&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><code>ValidatedUserRoute</code> is just a function that makes sure the user is authenticated, if not, redirect to home.</p>
  
  <pre><code> const ValidatedUserRoute = ({component: Component}, store, ...rest) =&gt; (
      &lt;Route 
        {...rest} 
        render={props =&gt; 
          store.validated ? (
          &lt;Component {...props} /&gt;) : (
            &lt;Redirect to={{
              pathname: "/"
            }}
            /&gt;
          )
      } /&gt;
    );
    export default ValidatedUserRoute
  </code></pre>
  
  <p><strong>The problem</strong></p>
  
  <p>When I click on the links, <strong>my URL does change</strong>, but the components does not render, like the page is stuck on what component was loaded at first when loading the web-page.</p>
  
  <pre><code>        &lt;Link to="/"&gt;Home&lt;/Link&gt;
          &lt;Link to='/login'&gt;Log In&lt;/Link&gt;
  </code></pre>