title: React router 4 renders wrong route?
body: <p>I run into a slightly problem. I have <code>Root</code> component which contains <code>Switch</code> and two <code>Route</code>. When the user loads the page I want to render the initial <code>&lt;Route path="/" /&gt;</code> This route contains a component with a <code>Route</code> pointing to the gallery I want to show.
  When the user clicks on the images the route changes and another set of images based on the route change. This works as expected. But when the use goes for the second <code>&lt;Route path="/login" /&gt;</code> inside the <code>Root</code>, the path changes but the initial is rendered. Even the gallery is not rendered because of the not matching path, but the <code>Header</code> and <code>HeaderAbout</code> is rendered. How?</p>
  
  <pre><code>class Root extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Navigation /&gt;
          &lt;Switch&gt;
            &lt;Route component={Home} path="/" /&gt;
            &lt;Route component={Login} exact path="/login" /&gt;
           &lt;/Switch&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Route inside initial</strong></p>
  
  <pre><code>class Home extends Component&lt;Props&gt; {
    _scrollDown = event =&gt; {
      event.preventDefault();
      this.gallery.scrollIntoView({ behavior: 'smooth' });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Header onClick={event =&gt; this._scrollDown(event)} /&gt;
          &lt;HeaderAbout /&gt;
          &lt;Route
            render={props =&gt; (
              &lt;div
                ref={node =&gt; {
                  this.gallery = node;
                }}
              &gt;
                &lt;RelayGallery {...props} /&gt;
              &lt;/div&gt;
            )}
            path="/home/:galleryRef?"
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>