react-router - 从嵌套路由器导航到父路由

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）。子路由器只是返回 null。

例如，我尝试在组件内调用props.history.push('/')和，但子路由器返回 null。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组件不会显示。

Answer 1

@butchyyyy 在评论中为我回答了这个问题，但我回答是为了防止其他人找到它。

他说：有什么理由在你的应用程序中使用两个路由器吗？顶层应该只有一台路由器。这个沙箱是否能满足您的需求：codesandbox.io/s/8kwy5pkvm8

我有一个带有开关的主导航，其中一个页面有一个子导航。

对我有用的是简单地删除第二个路由器组件并在子路径中使用父路径。

子组件如下所示：

const Apps = () => (
    <div className='main-container'>
    <SubNav items={subNavOptions} />
    <Route exact path='/apps' component={Applist} />
    <Route path='/apps/single-choice-lists' component={SingleChoiceLists} />
    <Route path='/apps/classification-sets' component={ClassificationSets} />
  </div>
)

希望这对其他人有帮助。