title: Stop re-rendering components when route changes. Especially components outside Routes
body: <p>I have the following components structure:</p>
  <ul>
  <li>App
  <ul>
  <li>Header</li>
  <li>Home</li>
  <li>Categories</li>
  <li>Products
  <ul>
  <li>ProductList</li>
  <li>ProductDetail
  <ul>
  <li>ProductDetailMore</li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  </li>
  </ul>
  <p><strong>Main Route:</strong></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-html lang-html prettyprint-override"><code>&lt;div&gt;
        &lt;Header /&gt;
  
        &lt;Switch&gt;
          &lt;Route exact path="/" render={() =&gt; &lt;Home /&gt;} /&gt;
          &lt;Route path="/category" render={() =&gt; &lt;Categories /&gt;} /&gt;
          &lt;Route path="/products" render={() =&gt; &lt;Products /&gt;} /&gt;
        &lt;/Switch&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>The Route in Products:</strong></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-html lang-html prettyprint-override"><code>const productsData = [...]; 
  
  return (
  &lt;div&gt;
    &lt;div&gt;
      &lt;ProductList data={productsData} /&gt;
    &lt;/div&gt;
  
    &lt;Switch&gt;
      &lt;Route path={`${match.url}/:productId`} render={()=&gt;
        &lt;ProductDetail data={productsData} /&gt;} /&gt;
  
      &lt;Route exact path={match.url} render={()=&gt; (
        &lt;div style={{ textAlign: "center" }}&gt;Select a product.&lt;/div&gt;
      )} /&gt;
    &lt;/Switch&gt;
  &lt;/div&gt;
  );</code></pre>
  </div>
  </div>
  </p>
  <p><strong>And the route in ProductDetail:</strong></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-html lang-html prettyprint-override"><code>return (
  &lt;&gt;
    &lt;div&gt;
      &lt;h3&gt; {product.name} &lt;/h3&gt;
      Links:
      &lt;div&gt;
        &lt;NavLink activeClassName="active" to={`${match.url}/detail/${ "100"}`}&gt;
          Click me
        &lt;/NavLink&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;Route path={`${match.url}/detail/:code`} render={()=&gt;
        &lt;ProductDetailMore /&gt;} /&gt;
    &lt;/div&gt;
    &lt;/&gt; );</code></pre>
  </div>
  </div>
  </p>
  <p>When I click on 'Click me' the value <strong>100</strong> is correctly displayed in my <strong>ProductDetailMore</strong> component but all the components are re-rendered (Products, ProductList, ProductDetail, ProductDetailMore); so, my questions is, how can I prevent a re-rendering in the parent components [Products, ProductDetail]?</p>
  <p>And especially, I would like to avoid a re-render in ProductList, the one that is not in a Route?</p>