title: React Router: this.props.params not updated after Link click
body: <p>I'm building a simple react app with a sidebar. from it, I want to swap out the various categories of the app.</p>
  
  <p>My router looks like this:</p>
  
  <pre><code>&lt;Route path={path} component={App}&gt;
     &lt;IndexRoute component={HomeView} /&gt;
     &lt;Route path="/" component={HomeView} /&gt;
     &lt;Route path="/manage" component={LoggedInView} /&gt;
     &lt;Route path="/search/:topic" component={SearchView} /&gt;
     &lt;Route path="/c/:category" component={CategoryView} /&gt;
     &lt;Route path="*" component={ErrorView} type="404"/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>In the sidebar I have a link like this:</p>
  
  <pre><code>  &lt;Link to={{ pathname: '/c/'+el.urlkey}} activeClassName="active"{el.title}&lt;/Link&gt;
  </code></pre>
  
  <p>Finally in the CategoryView I have this variable:</p>
  
  <pre><code>   let queryParam = this.props.params.category;
  </code></pre>
  
  <p>When I click the Link, the url in the urlbar changes, but the category doesn't. When I click it again, the category changes as well. </p>
  
  <p>If I log the 'queryParam ', I see that the first time I click, it returns the same value. only after the second click does it change. </p>
  
  <p>Why isn't it changing on the first click? I've also tried routing programmatically using </p>
  
  <pre><code> this.props.router.push(url);
  </code></pre>
  
  <p>But the issue still occurs.
  Any help is greatly appreciated!</p>
  
  <ul>
  <li>EDIT</li>
  </ul>
  
  <p>This is the code for the Categoryview</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-js lang-js prettyprint-override"><code>@pureRender
  class Category extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        activeCategoryName: '',
        activeCategory: {},
        availableTopics: {},
        ...
      };
    }
  
  
    componentWillReceiveProps() {
      this.showCategory();
    }
  
    componentWillMount(){
      this.showCategory();
    }
  
    showCategory(){
      const self = this;
      let queryParam = this.props.params.category;
      const availableCategories = this.props.categories;
      let matched = false;
  
      const count = availableCategories.length - 1;
      if(count === -1){
        this.setState({
          notFound: true
        });
      } else {
        filter(availableCategories, function (el, index) {
          const categoryTitle = el.urlkey.toLowerCase();
          const activeLocale = self.props.activeLocale;
          let title = null;
          if (queryParam !== undefined) {
            title = queryParam.toLowerCase();
          }</code></pre>
  </div>
  </div>
  </p>