title: React Router changing params doesn't fire componentWillRecieveProps
body: <p><strong>The Problem:</strong> Changing the parameters of a <code>&lt;Route /&gt;</code> component does not update the component it is rendering. The route change is shown in the URL bar, but directly rendering <code>{this.props.match.params.id}</code> shows the old <code>:id</code> and not the new one reflected in the URL bar.</p>
  
  <p><strong>Update:</strong> I fixed this by moving the <code>&lt;BrowserRouter /&gt;</code> out from the index.js file and into the App.js file. It is no longer the direct child of Provider and is instead the child of the App component. No clue why this makes everything suddenly work.</p>
  
  <p><strong>What I am doing:</strong> I have a <code>&lt;Link to="/user/11" /&gt;</code> that goes from <code>user/7</code> (or any current ID) to a <code>/user/11</code></p>
  
  <p>The <code>componentWillReceiveProps(newProps)</code> of the component it is rendering is not fired.(This component is connected using <code>react-redux</code> if that helps any. I tried applying <code>withRouter</code> around the connection and that did not help)</p>
  
  <p>If I manually refresh the page in chrome (using CTRL-R or the refresh button) the page shows the new data, rendering the "new" param.</p>
  
  <p><strong>TLDR:</strong> Switching from <code>/user/7</code> to <code>/user/11</code> does not fire that <code>componentWillRecieveProps</code> function and therefore leaving the component displaying the old state</p>
  
  <p><strong>Question:</strong> What am I doing incorrectly here that causes <code>componentWillReceiveProps</code> to not fire.</p>
  
  <p>I am using react-router v4 and the latest create-react-app</p>
  
  <p>This is my CWRP function:</p>
  
  <pre><code>componentWillReceiveProps(newProps) {
    console.log("getProps")
  
    this.props.getUser(newProps.match.params.id)
  
    if (newProps.match.params.id == newProps.currentUser.id) {
      this.setState({ user: "currentUser" })
    } else {
      this.setState({ user: "selectedUser" })
    }
  }
  </code></pre>
  
  <p>This is the full code of my component: <a href="https://gist.github.com/Connorelsea/c5c14e7c54994292bef2852475fc6b43" rel="nofollow noreferrer">https://gist.github.com/Connorelsea/c5c14e7c54994292bef2852475fc6b43</a></p>
  
  <p>I was following the solution here and it did not seem to work for me. <a href="https://stackoverflow.com/questions/32261441/component-does-not-remount-when-route-parameters-change">Component does not remount when route parameters change</a></p>