title: react-router - Navigate to parent route from nested router
body: <p>I'm playing around with <code>react-router</code>, and I have a problem when using nested routes.</p>
  
  <p>Here is my parent router:</p>
  
  <pre><code>&lt;Router&gt;
      &lt;div&gt;
          &lt;Route exact path="/" component={HomePage} /&gt;
          &lt;Route path="/account" component={AccountDashboard} /&gt;
       &lt;/div&gt;
   &lt;/Router&gt;
  </code></pre>
  
  <p>Here is the router inside <code>AccountDashboard</code>:</p>
  
  <pre><code>&lt;Router&gt;
      &lt;Route path="/account/password-reset" component={ChangePassword} /&gt;
      &lt;Route path="/account/sign-out" component={SignOut} /&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>Once I navigate to either <code>/account/password-reset</code> or <code>/account/sign-out</code>, I can't seem to navigate back to the root of the parent router (to view the <code>HomePage</code> component). The child router is just returning null.</p>
  
  <p>For example, I tried calling both <code>props.history.push('/')</code> and <code>props.history.reset('/')</code> within the <code>ChangePassword</code> component, but the child router returns null.</p>
  
  <p>If I add a route for <code>'/'</code> in the AccountDashboard router, any component I provide will render just fine because the router in AccountDashboard matches it, but I want to redirect to <code>'/'</code> within the ChangePassword component and show the <code>HomePage</code> component via the parent router.</p>
  
  <p>How do I navigate to a route on a parent router within a child/nested router?</p>
  
  <h2>Edit: I just made a basic implementation from scratch, same problem:</h2>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";
  
  const Blue = withRouter(({ history }) =&gt; (
    &lt;div style={{ border: "1px solid #222", width: "300px", padding: "4px", margin: "4px"}}&gt;
      &lt;h2&gt;Blue Component&lt;/h2&gt;
      &lt;span
        style={{color: 'blue', textDecoration: 'underline'}}
        onClick={() =&gt; { history.replace('/') }}&gt;
        Go back to Letters
      &lt;/span&gt;
    &lt;/div&gt;
  ));
  
  const Green = withRouter(({ history }) =&gt; (
    &lt;div style={{ border: "1px solid #222", width: "300px", padding: "4px", margin: "4px"}}&gt;
      &lt;h2&gt;Green Component&lt;/h2&gt;
      &lt;span
        style={{color: 'blue', textDecoration: 'underline'}}
        onClick={() =&gt; { history.replace('/') }}&gt;
        Go back to Letters
      &lt;/span&gt;
    &lt;/div&gt;
  ));
  
  const Letters = () =&gt; (
    &lt;div style={{ border: "1px solid #222", width: "300px", padding: "4px", margin: "4px"}}&gt;
      &lt;h2&gt;Letters (Root) Component&lt;/h2&gt;
    &lt;/div&gt;
  )
  const Colors = () =&gt; (
    &lt;Router&gt;
      &lt;div&gt;
      Child Router
      &lt;br&gt;&lt;/br&gt;
      [ &lt;Link to="/colors/blue"&gt;Blue&lt;/Link&gt; ]
      [ &lt;Link to="/colors/green"&gt;Green&lt;/Link&gt; ]
        &lt;Route path="/colors/blue" exact component={Blue} /&gt;
        &lt;Route path="/colors/green" component={Green} /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
          Parent Router
          &lt;br&gt;&lt;/br&gt;
          [ &lt;Link to="/"&gt;Letters&lt;/Link&gt; ][ &lt;Link to="/colors"&gt;Colors&lt;/Link&gt; ]
            &lt;Route path="/" exact component={Letters} /&gt;
            &lt;Route path="/colors" component={Colors} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>With the above code, the app will load and display the <code>Letters</code> component. If you click on <code>Colors</code>, you'll be taken to the second router, where you can select 'Blue' or 'Green', which each have a link back to '/'. When you follow that link, the URL changes correctly to '/', but the original <code>Letters</code> component does not display.</p>