title: Overlapping routes in react-router
body: <p>I've got number of nested routes and would want them to be displayed one at time. </p>
  
  <p>The top route is, let's say, '/sports'</p>
  
  <pre><code>&lt;&gt;
    &lt;Route exact path={`${match.path}/favs`} component={LiveFavs} /&gt;
    &lt;Route exact path={`${match.path}/:sportId`} render={props =&gt; &lt;Live {...props.match.params} /&gt;} /&gt;
    &lt;Route exact path={`${match.path}/:sportId/:eventId`} render={props =&gt; &lt;LiveEvent {...props.match.params} /&gt;} /&gt;
  &lt;/&gt;
  </code></pre>
  
  <p>Navigating to <code>/sports/favs</code> should display first route ONLY, but currently it's mixed with route no. 2 (<code>:sportId</code>)</p>