title: React force re-mount component on route change
body: <p>How can I re-mount a component on route change when using the same component for both the routes?</p>
  
  <p>Here is my code.</p>
  
  <p><em>routes.jsx</em></p>
  
  <pre><code>&lt;Router history={browserHistory}&gt;
    &lt;Route path="/" component={Home} /&gt;
    &lt;Route path="/foo/:fooId" component={Home} /&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>I have a conditional check in <code>Home</code> component for <code>fooId</code>, which renders the JSX accordingly.</p>
  
  <pre><code>&lt;Link to="/foo/1234"&gt;fooKey&lt;/Link&gt;
  </code></pre>
  
  <p>At the moment, when clicked on <code>fooKey</code> the route changes and the render function in Home component is re-triggered but is not mounted again. </p>
  
  <p>I went through other answers which mentioned <code>componentWillReceiveProps</code>, but I have a lot of config in the <code>constructor</code> and I don't want to be moving all of that config to <code>componentWillReceiveProps</code>.</p>
  
  <p>Please comment if more information is needed. </p>