title: React Router only updating after second click
body: <p>So, basically I have multiple nested routes like <code>/:platform/:account/products/:tab/:productId/summary</code>.
  Everything works fine down to my actual single product component, but react-router stops working properly in my single product tabs.
  I have a products view, with tabs (routes) , and when clicking an item, there's a popup that is the single product view, which, has 3 more tabs inside.</p>
  
  <p>The child routes of my product are updating, but only on the next render cycle.</p>
  
  <ol>
  <li>I'm In Summary and I click Prices: nothing happens
  (route changes to  <code>/:platform/:account/products/:tab/:productId/prices</code>)</li>
  <li>I click Summary: Rendered component changes to Prices
  (route changes to  <code>/:platform/:account/products/:tab/:productId/summary</code>)</li>
  <li>I click Translations: Rendered component changes to Summary
  (route changes to  <code>/:platform/:account/products/:tab/:productId/translations</code>)</li>
  <li>I click Translations again: Rendered component changes to Translations
  (no route change at all)</li>
  </ol>
  
  <p>I've been fighting with this for over 4 hours, I checked if I had any <code>PureComponent</code> in my tree, I used <code>withRouter</code> pretty much everywhere, I also checked if my product component was not updating (maybe my main view component was blocking the update), but everything seems fine, new props are correct.
  I also tried using <code>{ pure: false }</code> in <code>connect()</code> but nothing helped.
  I also removed this <code>localize</code> HOC just in case, but that didn't solve it.</p>
  
  <h2>Version</h2>
  
  <p>4.2.0</p>
  
  <h2>Sample code</h2>
  
  <p>Here is a stripped down render method from my component:</p>
  
  <pre><code>class ProductView extends Component {
    componentWillReceiveProps() {
      console.log("UPDATED PRODUCT TAB")
    }
  
    render() {
      const { match, history, translate, lang, loading, data } = this.props
      console.log(match)
      return (
        &lt;Modal&gt;
            &lt;TabList&gt;
          &lt;TabItem&gt;
            &lt;NavLink
              activeClassName="active"
              to={{
                pathname: `/${match.params.platform}/${match.params.account}/products/${match.params.tab}/${match.params.productId}/summary`,
                search: location.search,
              }}
            &gt;
              {translate("Summary")}
            &lt;/NavLink&gt;
          &lt;/TabItem&gt;
          &lt;TabItem&gt;
            &lt;NavLink
              activeClassName="active"
              to={{
                pathname: `/${match.params.platform}/${match.params.account}/products/${match.params.tab}/${match.params.productId}/prices`,
                search: location.search,
              }}
            &gt;
              {translate("Prices")}
            &lt;/NavLink&gt;
          &lt;/TabItem&gt;
          &lt;TabItem&gt;
            &lt;NavLink
              activeClassName="active"
              to={{
                pathname: `/${match.params.platform}/${match.params.account}/products/${match.params.tab}/${match.params.productId}/translations`,
                search: location.search,
              }}
            &gt;
              {translate("Translations")}
            &lt;/NavLink&gt;
          &lt;/TabItem&gt;
        &lt;/TabList&gt;
            &lt;Switch&gt;
              &lt;Route path="/:platform/:account/products/:tab/:id/summary" component={Summary} /&gt;
              &lt;Route path="/:platform/:account/products/:tab/:id/prices" component={Prices} /&gt;
              &lt;Route path="/:platform/:account/products/:tab/:id/translations" component={Translations} /&gt;
            &lt;/Switch&gt;
        &lt;/Modal&gt;
      )
    }
  }
  
  const mapStateToProps = state =&gt; (...)
  
  const mapDispatchToProps = dispatch =&gt; (...)
  
  export default withRouter(connect(
    mapStateToProps,
    mapDispatchToProps,
  )(localize("translate")(ProductView)))
  </code></pre>
  
  <p>The Route to get to the product Component looks like:
  <code>&lt;Route exact path="/:platform/:account/products/:tab/:productId/:productTab" component={ProductView} /&gt;</code>
  Adding or removing <code>:productTab</code> makes no difference.
  Inside the component with this Product Route I have other <code>NavLinks</code> for tabs and Router is working correctly.</p>
  
  <p>What's weird here is that components update all the way down to my Product Route, with correct <code>match</code> props, but those child Routes, including NavLinks only update after another click.</p>
  
  <p><img src="https://user-images.githubusercontent.com/10537219/30656247-c126704c-9e33-11e7-9c80-1b1302e5e89e.png" alt="screenshot from 2017-09-20 18-44-22"></p>