反应嵌套路由无法正常工作

Posted 2023-02-21

【中文标题】反应嵌套路由无法正常工作

【英文标题】：React nested routing not working properly

【发布时间】：2020-08-26 00:53:17

【问题描述】：

我正在为 Django 应用程序创建前端。我想将我的应用组件路由到以下组件。

/
/dashboard
/about
/contact

那么仪表板组件应该路由为

/dashboard/
/dashboard/notification/
/dashboard/profile/

我成功地将我的 App 组件路由为

import React,  Component, Fragment  from 'react'
import ReactDOM from 'react-dom'
import  BrowserRouter as Router, Switch, Route, Redirect  from 'react-router-dom'
import HomeMain from './layout/main/HomeMain'
import './css/style.css'
import Notfound from './layout/main/Notfound'
import Dashboard from './layout/dashboard/Dashboard'
class App extends Component 
  render() 
    return (
      <Router>
        <Fragment>
          <Switch>
            <Route exact path="/dashboard" component=Dashboard />
            <Route exact path="/" component=HomeMain />
            <Route exact path="/not" component=Notfound />
          </Switch>
        </Fragment>
      </Router>
    )
  

ReactDOM.render(<App />, document.getElementById('app'))

然后我尝试使用嵌套路由来路由我的仪表板，但输出在 http://127.0.0.1:8000/dashboard/notification/

处变为空白页

import React,  Fragment  from 'react'
import '../../css/dash.css'
import '../../css/style.css'
import DashHeader from './DashHeader'
import DashMain from './Dmain/DashMain'
import NotiMain from './Dmain/NotiMain'
import  Switch, Route, BrowserRouter as Router  from 'react-router-dom'
class Dashboard extends React.Component 
  path = this.props.match.path

  render() 
    return (
      <Fragment>
        <DashHeader />
        <Switch>
          <Route exact path=`$this.path/`>
            <DashMain />
          </Route>
          <Route exact path=`$this.props.match.url/notification`>
            <DashMain />
          </Route>
        </Switch>
      </Fragment>
    )
  

export default Dashboard

【问题讨论】：

"如果顶层有确切的路由，则不能使用嵌套的路由"

【参考方案1】：

当 Dashboard 组件有子（嵌套）路由时，您需要从 /dashboard 路由中删除 exact：

<Router>
    <Fragment>
        <Switch>
            <Route path="/dashboard" component=Dashboard/> // remove exact
            <Route exact path="/" component=HomeMain/>
            <Route exact path="/not" component=Notfound/>
        </Switch>
    </Fragment>
</Router>

来自文档：

当为 true 时，仅当路径与 location.pathname 匹配时才会匹配 没错。

所以，当您在 /dashboard 添加 exact 并在浏览器中点击 /dashboard/some-child-route 时，它与 Dashboard 路由不匹配并且不渲染它和它的子节点。

This 的帖子也会帮助你理解它。

【讨论】：

谢谢您，先生。它正在工作。而且我的帖子也很有用