【React系列】React-Router的嵌套路由那些事儿～

Mr_Carl
808 阅读2分钟

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

在上篇文章中，我们了解了React-Router的基本用法，但是在实际的路由场景中，嵌套路由 是十分常见的，因此本篇文章准备就 嵌套路由 的场景，讲解如何使用React-Router来解决，废话不多说，开搞！

ppx.jpg

什么是嵌套路由

对于一个url只展示一个路由组件的场景，在理解上是最简单的，因为就是一个简单的一对一关系，没有其它的东西，但是在实际的场景中，嵌套路由 其实才是最普遍的，对于它，我们可以简单地理解为一个url对应 多个 路由组件，多个路由组件共同组成了页面，这些路由组件之间存在 包含与被包含 的关系，通过合理的组件拆分，可以搭建出一个便于扩展与维护的路由系统

举一个实际的使用场景，通常对于 后台管理系统 的路由搭建，我们都会采取嵌套路由的方案来解决，管理系统的界面我们通常会分为两个部分：

  • 导航栏
  • 内容区域

这两个部分本身组成一个 一级路由，内容区域根据导航栏的选择，渲染 二级路由 的内容，这就是一个嵌套路由的简单应用

React-Router中，如何使用嵌套路由

在React-Router中，使用嵌套路由十分简单，下面给出代码示例

//App.jsx
import React from 'react'
import {HashRouter,Route,Switch,Link} from 'react-router-dom'
import welcome from './components/welcome'
import Nest from './components/Nest'

const App = ()=>{
  return (
      <HashRouter>
          <Link to="/nest/A">/nest/A</Link>
           <Switch>
             <Route  path='/nest' component={Nest}></Route>
             <Route exact path='/' component={welcome}></Route>
           </Switch>
      </HashRouter>
  )
}

export default App


//Nest.jsx
import {Switch,Route,useRouteMatch} from 'react-router-dom'
import A from './A'
export default function Nest(){
  const {path} = useRouteMatch()
  return (
    <>
      <p>this is nest</p>
      <Switch>
        <Route path={`${path}/A`} exact component={A}></Route>
      </Switch>
    </>
  )
}


//A.jsx
export default function A(){
  return (
    <p>this is A</p>
  )
}

通过代码示例，我们可以知道在React-Router中实现嵌套路由十分简单，没有什么需要深挖的地方，但是有两点还是单独说明下：

  1. 父级路由不能加 exact，不然无法正确导航
  2. 在匹配子级路由时，必须 全路径匹配，也就是需要带上父级路径，这一点在v6版本中已得到优化

结语

虽然嵌套路由原理很简单，但是必须得掌握，这样我们才能应对实际的开发场景，好啦，就写到这啦，完结，撒花🎉～

avatar
文章
阅读
粉丝