时间戳

首页 > 解决方案 > react-router - 从嵌套路由器导航到父路由

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

问题描述

我在玩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('/')和调用，但子路由器返回 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，您将被带到第二个路由器，您可以在其中选择“蓝色”或“绿色”，每个路由器都有一个返回“/”的链接。Letters当您点击该链接时，URL 会正确更改为“/”，但不会显示原始组件。

标签： javascriptreactjsreact-router

解决方案

@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>
)

希望这对其他人有帮助。

推荐阅读