реакции-маршрутизатор - перейдите к родительскому маршруту от вложенного маршрутизатора

Question

Я играю с react-router, и у меня возникла проблема при использовании вложенных маршрутов.

Вот мой родительский роутер:

<Router>
    <div>
        <Route exact path="/" component={HomePage} />
        <Route path="/account" component={AccountDashboard} />
     </div>
 </Router>

Вот маршрутизатор внутри AccountDashboard:

<Router>
    <Route path="/account/password-reset" component={ChangePassword} />
    <Route path="/account/sign-out" component={SignOut} />
</Router>

После перехода к /account/password-reset или /account/sign-out я не могу перейти обратно к корню родительского маршрутизатора (для просмотра компонента HomePage). Дочерний маршрутизатор просто возвращает ноль.

Например, я попытался вызвать оба props.history.push('/') и props.history.reset('/') внутри компонента ChangePassword, но дочерний маршрутизатор возвращает ноль.

Если я добавлю маршрут для '/' в маршрутизаторе AccountDashboard, любой предоставленный мною компонент будет работать нормально, потому что маршрутизатор в AccountDashboard соответствует ему, но я хочу перенаправить на '/' в компоненте ChangePassword и показать HomePage компонент через родительский маршрутизатор.

Как перейти к маршруту на родительском маршрутизаторе внутри дочернего / вложенного маршрутизатора?

Редактировать: я только что сделал базовую реализацию с нуля, та же проблема:

import React, { Component } from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";

const Blue = withRouter(({ history }) => (
  <div style={{ border: "1px solid #222", width: "300px", padding: "4px", margin: "4px"}}>
    <h2>Blue Component</h2>
    <span
      style={{color: 'blue', textDecoration: 'underline'}}
      onClick={() => { history.replace('/') }}>
      Go back to Letters
    </span>
  </div>
));

const Green = withRouter(({ history }) => (
  <div style={{ border: "1px solid #222", width: "300px", padding: "4px", margin: "4px"}}>
    <h2>Green Component</h2>
    <span
      style={{color: 'blue', textDecoration: 'underline'}}
      onClick={() => { history.replace('/') }}>
      Go back to Letters
    </span>
  </div>
));

const Letters = () => (
  <div style={{ border: "1px solid #222", width: "300px", padding: "4px", margin: "4px"}}>
    <h2>Letters (Root) Component</h2>
  </div>
)
const Colors = () => (
  <Router>
    <div>
    Child Router
    <br></br>
    [ <Link to="/colors/blue">Blue</Link> ]
    [ <Link to="/colors/green">Green</Link> ]
      <Route path="/colors/blue" exact component={Blue} />
      <Route path="/colors/green" component={Green} />
    </div>
  </Router>
);

class App extends Component {
  render() {
    return (
      <Router>
        <div>
        Parent Router
        <br></br>
        [ <Link to="/">Letters</Link> ][ <Link to="/colors">Colors</Link> ]
          <Route path="/" exact component={Letters} />
          <Route path="/colors" component={Colors} />
        </div>
      </Router>
    );
  }
}

export default App;

С помощью приведенного выше кода приложение загрузит и отобразит компонент Letters. Если вы нажмете Colors, вы попадете на второй маршрутизатор, где вы можете выбрать «Синий» или «Зеленый», каждый из которых имеет ссылку на «/». При переходе по этой ссылке URL-адрес корректно меняется на «/», но оригинальный компонент Letters не отображается.