title: React Router v4 Nested match params not accessible at root level
body: <h2>Test Case</h2>
  
  <p><a href="https://codesandbox.io/s/rr00y9w2wm" rel="noreferrer">https://codesandbox.io/s/rr00y9w2wm</a></p>
  
  <h2>Steps to reproduce</h2>
  
  <ul>
  <li>Click on <a href="https://rr00y9w2wm.codesandbox.io/topics" rel="noreferrer">Topics</a></li>
  <li>Click on <a href="https://rr00y9w2wm.codesandbox.io/topics/rendering" rel="noreferrer">Rendering with React</a></li>
  </ul>
  
  <p>OR</p>
  
  <ul>
  <li>Go to <a href="https://rr00y9w2wm.codesandbox.io/topics/rendering" rel="noreferrer">https://rr00y9w2wm.codesandbox.io/topics/rendering</a></li>
  </ul>
  
  <h2>Expected Behavior</h2>
  
  <ul>
  <li><code>match.params.topicId</code> should be identical from both the parent <strong>Topics</strong> component should be the same as <code>match.params.topicId</code> when accessed within the <strong>Topic</strong> component</li>
  </ul>
  
  <h2>Actual Behavior</h2>
  
  <ul>
  <li><code>match.params.topicId</code> when accessed within the <strong>Topic</strong> component is <strong>undefined</strong></li>
  <li><code>match.params.topicId</code> when accessed within the <strong>Topics</strong> component is <strong>rendering</strong></li>
  </ul>
  
  <p>I understand from <a href="https://github.com/ReactTraining/react-router/issues/5870" rel="noreferrer">this closed issue</a> that this is not necessarily a bug.</p>
  
  <p>This requirement is super common among users who want to create a run in the mill web application where a component <code>Topics</code> at a parent level needs to access the <strong>match.params.paramId</strong> where <code>paramId</code> is a URL param that matches a nested (child) component <code>Topic</code>:</p>
  
  <pre><code>const Topic = ({ match }) =&gt; (
    &lt;div&gt;
      &lt;h2&gt;Topic ID param from Topic Components&lt;/h2&gt;
      &lt;h3&gt;{match.params.topicId}&lt;/h3&gt;
    &lt;/div&gt;
  );
  
  const Topics = ({ match }) =&gt; (
    &lt;div&gt;
      &lt;h2&gt;Topics&lt;/h2&gt;
      &lt;h3&gt;{match.params.topicId || "undefined"}&lt;/h3&gt;
      &lt;Route path={`${match.url}/:topicId`} component={Topic} /&gt;
      ...
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>In a generic sense, <code>Topics</code> could be a Drawer or Navigation Menu component and <code>Topic</code> could be any child component, like it is in the application I'm developing. The child component has it's own <code>:topicId</code> param which has it's own (let's say) <code>&lt;Route path="sections/:sectionId" component={Section} /&gt;</code>  Route/Component.</p>
  
  <p>Even more painful, the Navigation Menu needn't have a one-to-one relationship with the component tree. Sometimes the items at the root level of the menu (say <code>Topics</code>, <code>Sections</code> etc.) might correspond to a <strong>nested</strong> structure (<code>Sections</code> is only rendered under a Topic, <code>/topics/:topicId/sections/:sectionId</code> though it has its own normalized list that is available to the user under the title <strong>Sections</strong> in the Navigation Bar).
  Therefore, when <strong>Sections</strong> is clicked, <em>it</em> should be highlighted, and not both <strong>Sections</strong> <em>and</em> <strong>Topics</strong>.</p>
  
  <p>With the <code>sectionId</code> or <code>sections</code> path unavailable to the Navigation Bar component which is at the Root level of the application, it becomes necessary to write <a href="https://github.com/ReactTraining/react-router/issues/5870#issuecomment-400404301" rel="noreferrer">hacks like this</a> for such a commonplace use case. </p>
  
  <p>I am not an expert at all at React Router, so if anyone can venture a proper elegant solution to this use case, I would consider this to be a fruitful endeavor. And by elegant, I mean</p>
  
  <ul>
  <li>Uses <code>match</code> and not <code>history.location.pathname</code></li>
  <li>Does not involve hacky approaches like manually parsing the <code>window.location.xxx</code> </li>
  <li>Doesn't use <code>this.props.location.pathname</code></li>
  <li>Does not use third party libraries like <code>path-to-regexp</code></li>
  <li>Does not use query params</li>
  </ul>
  
  <p>Other hacks/partial solutions/related questions:</p>
  
  <ol>
  <li><p><a href="https://stackoverflow.com/questions/42253277/react-router-v4-how-to-get-current-route">React Router v4 - How to get current route?</a></p></li>
  <li><p><a href="https://stackoverflow.com/questions/43289132/react-router-v4-global-no-match-to-nested-route-childs">React Router v4 global no match to nested route childs</a></p></li>
  </ol>
  
  <p>TIA!</p>