＜路由的模糊匹配与严格匹配＞react-router-dom入门级教程2

前言

** 😎😎欢迎来到我的博客😎😎**
**📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是🔥

      R
     
     
      e
     
     
      a
     
     
      c
     
     
      t
     
     
      框
     
     
      架
     
    
    
     React框架
    
   
  React框架🔥，中间夹杂了一些基础知识的回顾⌨️

🌈博客主页👉codeMak1r.的博客**

😇😇本文目录😇😇

本文被专栏【React–从基础到实战】收录
前文回顾：＜前端路由原理＞react-router-dom入门级教程

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

模糊匹配

<!-- 编写路由链接 --><NavLink to="/home/a/b">Home</NavLink><!-- 注册路由 --><Switch><Route path="/home" component={Home}/></Switch>

点击Home，进入路径/home/a/b，此时模糊匹配到/home路径的组件{Home}。

开启严格匹配

<!-- 编写路由链接 --><NavLink to="/home/a/b">Home</NavLink><!-- 注册路由 --><Switch>// 开启严格匹配：exact={true}<Route exact path="/home" component={Home}/></Switch>

此时，点击Home，进入路径/home/a/b，无法匹配/home路径下的{Home}组件。

1. 默认使用的就是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致。
2. 开启严格匹配：

// 开启严格匹配：exact={true}<Route exact path="/home" component={Home}/>

1. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

Redirect的使用

路由重定向

{/* 注册路由 */}<Switch><Route path="/about" component={About}/><Route path="/home" component={Home}/><Redirect to="/home"/></Switch>

一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由。

嵌套路由使用

1. 注册子路由时要写上父路由的path值。 => /父路由path/子路由path。
2. 路由的匹配是按照注册路由的顺序进行的。

src项目结构

├─App.jsx
├─index.js
├─pages
|   ├─Home
|   |  ├─index.jsx
|   |  ├─News
|   |  |  └index.jsx
|   |  ├─Message
|   |  |    └index.jsx
|   ├─About
|   |   └index.jsx
├─components
|     ├─MyNavLink
|     |     └index.jsx
|     ├─Header
|     |   └index.jsx

Message是Home的子组件，News组件是Home的子组件
例如：注册Message组件时需要加上父路由Home的path值：/home/message

<Switch><Route path="/home/news" component={News}/><Route path="/home/message" component={Message}/><Redirect to="/home/news"/></Switch>

🎉🎉今天的小知识就分享到这里啦
如果觉得博主的文章还不错的话
可以给博主一个免费的关注，如果三连点赞👍收藏支持的话就更好了
✏️原创不易你的支持将会是我最大的动力💪
🧸感谢观看