title: Tricky nested match.url in react router v4
body: <p>I want a component which renders on every route, and has child components (e.g. a header). </p>
  
  <p>By leaving out <code>exact</code> in the route I can achieve that.</p>
  
  <pre><code>render(
      &lt;Router&gt;
        &lt;Route path="/" component={App}/&gt;
      &lt;/Router&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>Inside the component, I have nested routes:</p>
  
  <pre><code>const App = ({match}) =&gt; (
      &lt;Switch&gt;
        &lt;Route path={`${match.url}login`} component={LoginForm}/&gt;
        &lt;Route path={`${match.url}panel`} component={ControlPanel}/&gt;
      &lt;/Switch&gt;
  );
  </code></pre>
  
  <p>It picks one out of two components to render, based on the path. </p>
  
  <p>As shown in the <a href="https://reacttraining.com/react-router/web/example/basic" rel="nofollow noreferrer">documentation</a> we need to use the match url. This was very confusing to me, since the <code>match.url</code> is <code>/</code>, and blindly following the examples I wrote e.g. <code>'{</code>${match.url}/login<code>}'</code>, which results in <code>//login</code>
  `</p>
  
  <p>My question: if I do not match a parameter, why can't I use a full path in the child? </p>
  
  <p>The following does not work when used inside <code>App</code>:</p>
  
  <pre><code>&lt;Route path="/login" component={LoginForm}/&gt;
  </code></pre>