title: Link to own match's exact path in React Router
body: <p>I have several nested routes using <code>react-router-dom</code> version 4.2.2, and I'd  to offer a "back" button on a root route. For example, if my hierarchy is</p>
  
  <ul>
  <li><code>/base/:id</code>: An index page representing a resource, linking to and conditionally rendering the inner activities
  
  <ul>
  <li><code>/base/:id/some-inner-activity</code>: A page representing one inner activity</li>
  <li><code>/base/:id/some-other-inner-activity</code>: A page representing another inner activity</li>
  </ul></li>
  </ul>
  
  <p>I'd like to be able to offer a link rendered by the base component that just brings you back to <code>/base/:id</code>, so all activities can have a shared "back" or "up" behavior. I can do this with <code>/base/${match.params.id}</code>, but that means I have to hard-code <code>/base/</code> within the base component, so if I were to change the route that it's on, I would have a bunch of broken links.</p>
  
  <p>I'd like to be able to use the <code>match.path</code> along with <code>match.params</code>, but I'm not sure how to do this in a way that's sanctioned by React Router, and I definitely don't want to implement this myself.</p>
  
  <p>I've put together a code sandbox demonstrating my preferred behavior, but you'll notice within the <code>Base</code> component I still have to hard-code the <code>/base/</code> string to generate the back button URL.</p>
  
  <p><a href="https://codesandbox.io/embed/n5r30r2qmm" rel="nofollow noreferrer">https://codesandbox.io/embed/n5r30r2qmm</a></p>