title: React-router v4 nested routes & programmatic navigation
body: <p>So, I have a few routes set up in this fashion:</p>
  
  <p>index.js</p>
  
  <pre><code>&lt;Route exact path={pathDefault} component={Home}&gt;
      &lt;Route path={path1} component={component1}/&gt;
      &lt;Route path={path2} component={component2}/&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>component1.js</p>
  
  <pre><code>&lt;Route exact path={`${props.match.url}`} component={Summary}/&gt;
  &lt;Route path={`${props.match.url}`/someOtherPath1} component={SubComponent1}/&gt;
  &lt;Route path={`${props.match.url}`/someOtherPath2} component={SubComponent2}/&gt;
  </code></pre>
  
  <p>component2.js is set up similarly.</p>
  
  <p>The idea here is that I have multiple top-level routes, which have default pages. But, then sub-routes that can be switched between. This works ok, until, when at one of the sub-level routes like <code>component1/someOtherPath2</code> I can switch between <code>someOtherPath1</code> and <code>someOtherPath2</code>, but if I then try to change one of the top level routes using <code>history.push(path2)</code>, instead of going back to a top level component (i.e. path1's default component), it ends up pushing a compounded, and thus incorrect route, like <code>component1/component2</code>.</p>
  
  <p>So, how would you change a higher-level route when in a lower level component programmatically (preferably using <code>history.push</code> or similar)?</p>