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('/')组件中同时调用props.history.reset('/')和ChangePassword，但是子路由器返回null。

如果我在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>
)

希望这对其他人有帮助。

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

编辑：我刚刚从头开始做了一个基本的实现，同样的问题：

1 个答案: