title: React router remounts children while changing routes (without reconciliation)
body: <p>I have a situation where few routes consists of the same component and I want to preserve its state, but with this behavior it's fairly impossible.</p>
  
  <p>Live example (look at seconds elapsed):
  <a href="https://csb-43lp1km647-nkiinaibit.now.sh" rel="noreferrer">https://csb-43lp1km647-nkiinaibit.now.sh</a></p>
  
  <p>CodeSandbox:
  <a href="https://codesandbox.io/s/43lp1km647" rel="noreferrer">https://codesandbox.io/s/43lp1km647</a></p>
  
  <p>Of course I could save and restore state of timer while changing routes, but my app has an infinite CSS transition as a background (not on every route).</p>
  
  <p>I was trying adding keys, even portal, but it still remounts everything.</p>
  
  <p>Is there any way to enforce typical React's <a href="https://reactjs.org/docs/reconciliation.html" rel="noreferrer">reconciliation</a> (remount only elements that have to be remounted)?</p>
  
  <p><strong>Update</strong>:
  Just found out that <code>&lt;Switch /&gt;</code> will render everything until it finds element that matches, and that could be either a certain <code>&lt;Route /&gt;</code> or any element except it's inside <code>&lt;Fragment /&gt;</code>.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;Router history={history}&gt;
    &lt;Switch&gt;
      &lt;Route path="/third" component={RouteWithoutTimer} /&gt;
      &lt;React.Fragment&gt;
        &lt;Timer /&gt;
        &lt;Route exact path="/" component={FirstRoute} /&gt;
        &lt;Route path="/second" component={SecondRoute} /&gt;
      &lt;/React.Fragment&gt;
    &lt;/Switch&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/0po6x3pplw" rel="noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit React router remounts children while changing routes"></a></p>
  
  <p>Or with wildcard route:</p>
  
  <pre><code>&lt;Router history={history}&gt;
    &lt;Switch&gt;
      &lt;Route path="/third" component={RouteWithoutTimer} /&gt;
      &lt;React.Fragment&gt;
        &lt;Timer /&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={FirstRoute} /&gt;
          &lt;Route component={NotFoundRoute} /&gt;
        &lt;/Switch&gt;
      &lt;/React.Fragment&gt;
    &lt;/Switch&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>It's not a solution I was looking for, but it works fine. </p>