react-router v6

文章简介

本文主要介绍：

新版本路由和老版本的差异，使用区别，API 区别。
新版本路由组件 Router ，Routes ，和 Route 的原理。
Outlet 组件原理。
useRoutes 原理。

目录

一，react路由6和路由5的差异

1 路由5中的Switch与路由6中的Routes

2 嵌套路由的升级

3 路由状态和页面跳转

状态获取

路由跳转

动态路由

url参数信息获取

官方文档

二 原理分析

1 新版 Route 设计

2 外层容器，更新源泉 BrowserRouter | HashRouter ｜ Router

老版本的 BrowserRouter

新版本的 BrowserRouter

新版本 Router

3 原理深入，Routes 和 branch 概念

Routes 和 useRoutes

useRoute

路由状态传递

三 v5 和 v6 区别总结

组件层面上：

使用层面上：

原理层面上：

---

---

一，react路由6和路由5的差异

 

1 路由5中的Switch与路由6中的Routes

新版本的 router 没有 Switch 组件，取而代之的是 Routes ，但是在功能上 Routes 是核心的，起到了不可或缺的作用。老版本的 route 可以独立使用，新版本的 route 必须配合 Routes 使用。

在新版的 router 中，已经没有匹配唯一路由的 Switch 组件，取而代之的是 Routes 组件，但是我们不能把 Routes 作为 Switch 的代替品。

因为在新的架构中 ，Routes 充当了很重要的角色，在 react-router路由原理 文章中，曾介绍到 Switch 可以根据当前的路由 path ，匹配唯一的 Route 组件加以渲染。

但是 Switch 本身是可以被丢弃不用的，但是在新版的路由中， Routes 充当了举足轻重的作用。

比如在 v5 中可以不用 Switch 直接用 Route，但是在 v6 中使用 Route ，外层必须加上 Routes 组件，也就是 Routes -> Route 的组合。

如果 Route 外层没有 Routes ，会报出错误。

2 嵌套路由的升级

新版本路由引入 Outlet 占位功能，可以更方便的配置路由结构，不需要像老版本路由那样，子路由配置在具体的业务组件中，这样更加清晰，灵活。

对于新版本的路由，嵌套路由结构会更加清晰.

比如在老版本的路由中，配置二级路由，需要在业务组件中配置，我们需要在 Children 组件中进行二级路由的配置。

但是在 路由6 中，对于配置子路由进行了提升，可以在子路由直接写在 父组件里。

Container 内部运用了 v6 Router 中的 Outlet 。

而 Outlet 才是真正渲染子路由的地方。

这里的 Outlet 更像是一张身份卡，证明了这个就是真正的路由组件要挂载的地方，而且不受到组件层级的影响。

这种方式更加清晰，灵活，能够把组件渲染到子组件树的任何节点上。

3 路由状态和页面跳转

状态获取

对于路由状态 location 的获取 ，可以用自定义 hooks 中 useLocation 。location 里面保存了 hash | key | pathname | search | state 等状态。

路由跳转

新版路由提供了 useNavigate ，实现路由的跳转。

动态路由

新版路由里面实现动态路由，也变得很灵活，可以通过 useParams 来获取 url 上的动态路由信息。比如如下

url参数信息获取

新版路由提供 useSearchParams 可以获取 ｜ 设置 url 参数

官方文档

v6 还提供了一些其他功能的 hooks ，这里就不一一讲了，有兴趣的同学可以看一下官方文档，

Docs Home v6.3.0 | React Router