「React 进阶」react-router v6 通关指南

,,不知不觉 react-router 已经到了 v6 版本了，可能很多同学发现，v6相比之前的 v5 有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了 v6 版本的 react-router，亲身体验发现这还是我认识的 router 吗 ？从 api 到原理都有较大的改动，所以今天就和大家一起看一下新版路由的变化。,对于这次的改动，笔者的建议是：如果是新项目，可以尝试新版本的 Rouer，对于老项目，建议还是不要尝试升级 v6 ，升级的代价是会造成大量的功能改动，而且如果用到了依赖于 router 的第三方库，可能会让这些库失效。,所以一些依赖于 react-router 的第三方库，也需要升级去迎合 v6 版本了，比如笔者之前的缓存页面功能的 react-keepalive-router，也会有大版本的更新。,通过本章节的学习，你将学习到以下内容：,让我们开始今天的 router v6 学习之旅吧。,首先我们从路由的使用方法上，来看一下 v6 的变化，还是举例一个场景。比如有如下的路由结构：,,如上图所示，页面分为简单的 2 级路由结构：,接下来看一下，新老版本路由在使用上有什么区别。,配置老版本路由,入口文件 -> 一级路由,上述为配置的一级路由的情况。我们看一下大体的功能职责分配：,如上是一级路由的配置和对应组件的展示，接下来看一下二级路由的配置，二级路由配置在 Children 中：,看一下整体效果：,,那么整体路由层级的结构图，如下所示（重点看和 v6 的整体设计的区别 ）：,,v5可以通过以下方式获取路由状态,v5通过以下方式实现路由跳转,上面介绍了路由状态获取，那么还有一个场景就是切换路由，那么 v5 主要是通过两种方式改变路由：,路由状态传递,至于在 React 应用中，路由状态是通过什么传递的呢，我们都知道，在 React 应用中， Context 是一个非常不错的状态传递方案，那么在 Router 中也是通过 context 来传递的，在 react-router v5.1.0及之前的版本，是把 history ，location 对象等信息通过一个 RouterContext 来传递的。,在 v5.2.0 到新版本 v5 React-Router 中，除了用 RouterContext 保存状态之外，history 状态由 HistoryContext 单独保存。,路由模块的整体设计,接下来我们看一下 v5 的 react-router 的整体设计：,,以上是整个 react-router v5 的模块设计。,接下来我们使用 react-router v6 版本尝鲜。用 v6 实现上述功能。,入口文件 -> 整体路由配置,如上，我们用 v6 版本的 router 同样实现了嵌套二级路由功能。通过如上代码我们可以总结出：,    1.在 v6 版本中 BrowserRouter 和 HashRouter 还是在整个应用的最顶层。提供了 history 等核心的对象。,    2.在新版的 router 中，已经没有匹配唯一路由的 Switch 组件，取而代之的是 Routes 组件，但是我们不能把 Routes 作为 Switch 的代替品。因为在新的架构中 ，Routes 充当了很重要的角色，在 react-router路由原理 文章中，曾介绍到 Switch 可以根据当前的路由 path ，匹配唯一的 Route 组件加以渲染。但是 Switch 本身是可以被丢弃不用的，但是在新版的路由中， Routes 充当了举足轻重的作用。比如在 v5 中可以不用 Switch 直接用 Route，但是在 v6 中使用 Route ，外层必须加上 Routes 组件，也就是 Routes -> Route 的组合。,如果 Route 外层没有 Routes ，会报出错误。比如如下,,这个同学们在开发的时候需要注意。,    3.对于新版本的路由，嵌套路由结构会更加清晰，比如在老版本的路由中，配置二级路由，需要在业务组件中配置，就像在第一个例子中，我们需要在 Children 组件中进行二级路由的配置。但是在 v6 中，对于配置子代路由进行了提升，可以在子代路由直接写在 Route 组件里，如上将 Child1 和 Child2 直接写在了 /children 的路由下面，那么有的同学会疑问，那么子路由将渲染在哪里，答案当然是上述的 Layout 组件内。那么就看一下 Layout 中是如何渲染的子代路由组件。,Layout -> 渲染二级路由,   4.如上我们可以看到，Layout 并没有直接渲染二级子路由，而是只有一个 Container， Container 内部运用了 v6 Router 中的 Outlet 。而 Outlet 才是真正渲染子代路由的地方，也就是 Child1 和 Child2 。这里的 Outlet 更像是一张身份卡，证明了这个就是真正的路由组件要挂载的地方，而且不受到组件层级的影响 （可以直接从上面看到，Outlet 并没有在 Layout 内部，而是在 Container ），这种方式更加清晰，灵活，能够把组件渲染到子组件树的任何节点上。,那么总结一下路由结构图如下所示：,,通过如上对比，可以看出 v6 大致上和 v5 的区别。这里对功能方面做了一下总结：,接下来看一下 v6 的其他功能。,路由状态获取和页面跳转,,navigate：第一参数是跳转路径，第二个参数是描述的路由状态信息，可以传递 state 等信息。,配置：,跳转动态路由页面：,useParams获取动态路由参数,useSearchParams 返回一个数组。, 数组第一项，getParams 获取 url 参数信息。2 数组第二项，setParam  设置 url 参数信息。,如上让结构更加清晰，配置更加灵活。,整体架构设计,接下来我们看一下 v6 整体设计：,,上述介绍了从使用上，v5 和 v6 版本路由的区别。接下来，我们重点看一下新版 Route 的原理。以及和老版本有什么区别。,老版本的路由，核心的组件是 **Route**，之前的路由原理文章中介绍过，Route 内部通过消费 context 方式，当路由改变的时候，消费 context 的 Route 会重新渲染，内部通过 match 匹配到当前的路由组件是否挂载，那么就是说真正去匹配，去挂载的核心组件为 Route。,而在新版本的 Route 中，对于路由更新，到路由匹配，再到渲染真正的页面组件，这些逻辑主要交给了 Routes ，而且加了一个 branch ‘分支’ 的感念。可以把新版本的路由结构理解一颗分层级的树状结构，也就是当路由变化的时候，会在 Routes 会从路由结构树中，找到需要渲染 branch 分支。此时的 Route 组件的主要目的仅仅是形成这个路由树结构中的每一个节点，但是没有真正的去渲染页面。,新版本的路由可以说把路由从业务组件中解耦出来，路由的配置不在需要制定的业务组件内部，而是通过外层路由结构树统一处理。对于视图则是通过 OutletContext 来逐层传递，接下来我们一起来看一下细节。,在新版本的路由中，对于外层的 Router 组件和老版本的有所差别。以 BrowserRouter 为例子，先看一下老版本。,接下来就是新版本的 BrowserRouter， 做了哪些事情呢？,新版本的 BrowserRouter 的功能如下：,接下来分析一下新版本 Router 做了哪些事。,Router 在新版路由中充当的角色如下：,上述我们拿 BrowserRouter 为例子，讲解了外层容器做了哪些事。我们继续深入探秘，看一下 routes 内部做了什么事，还有如何形成的路由的层级结构。以及路由跳转，到对应页面呈现的流程。,以如下例子为参考：,我们带着两个问题去思考。,Route 和 Routes 形成路由结构,上面我们讲到过，新版的 Route 必须配合上 Routes 联合使用。老版本 Route 至关重要，负责匹配和更新容器，那么新版本 Route 又做了哪些事呢？,刚看到 Route 的同学，可能会发懵，里面没有任何的逻辑，只有一个 invariant 提示。这可能会颠覆很多同学的认识，Route 组件不是常规的组件，可以理解成一个空函数。如果是正常按照组件挂载方式处理，那么肯定会报错误，那么我们写的 <Route> 是怎么处理的呢？实际上一切处理的源头就在 Routes 这个组件，它的作用就是根据路由的变化，匹配出一个正确的渲染分支 branch 。,那么 Routes 就是我们需要重点研究的对象。,Routes 和 useRoutes,首先来看一下 Routes 的实现：,上面我们讲到了，如果可以用 useRoutes ，可以直接把 route 配置结构变成 element 结构，并且负责展示路由匹配的路由组件，那么 useRoutes 就是整个路由体系核心。,在弄清楚 useRoutes 之前我们先来明白 createRoutesFromChildren 做了些什么？,createRoutesFromChildren 可以把 <Route> 类型的 react element 对象，变成了普通的 route 对象结构。我们上面说过了 Route 本质是一个空函数，并没有实际挂载，所以是通过 createRoutesFromChildren 处理转化了。,比如如下的结构:,element 会被转化成如下结构：,,接下来暴露的重点就是 useRoute ，似乎从路由挂载，再到切换路由重新渲染，都和它有关系。那么接下来重点看一下这个自定义 hooks。,这段代码是 v6 路由比较核心的一部分，为了加强理解，我把它分成三个阶段。,,通过上面可以看到，matches 为扁平化后匹配的路由结构，是一个数组结构，那么索引 0 为第一层路由，索引 1 为第二层路由。那么来看一下  matchRoutes 的实现。,matchRoutes 和 _renderMatches 渲染路由分支,,扁平化的 branches 里面有一个 routesMeta 属性，存放了每一个 route 信息，比如上面那个  /children/child1 那么本质上有2层路由组成。第一层是 /children，第二层是 /child1；,找到了对应的 matches ，我们知道 matches 里面保存了即将待渲染的路由。那么接下来就是去渲染路由，渲染对应的页面。那么主要就是 _renderMatches 做的事情了，所以我们看一下这个函数做了些什么？,这段代码很精妙，信息量也非常大，通过 reduceRight 来形成 react 结构 elmenet，这一段解决了三个问题：,首先我们知道 reduceRight 是从右向左开始遍历，那么之前讲到过 match 结构是 root -> children -> child1， reduceRight 把前一项返回的内容作为后一项的 outlet，那么如上的 match 结构会这样被处理。,那么从上面我们都知道 child1 是在 container 中用 Outlet 占位组件的形式渲染的。那么我们先想一下 Outlet 会做哪些事情，应该会用 useContext 把第一层 provider 的 outlet 获取到然后渲染就可以渲染 child1 的 provider 了，而 child1 为 children 也就会被渲染了。我们验证一下猜想是否正确。,到此为止，整个 v6 渲染原理就很清晰了。,我们把 reduceRight 做的事，用一幅流程图来表示。,,路由更新到对应组件渲染展示流程,接下来我们来分析一下如果通过 navigator 实现跳转，比如 home 跳转到 child1 组件，那么会发生哪些事情呢？,整个渲染流程还是比较简单和清晰的。,上面介绍了 v6 的用法和原理，接下来看一下 v6 和 v5 比较区别是什么？,组件层面上：,使用层面上：,原理层面上：,本文主要介绍了 v6 的基本使用，原理介绍，和 v5 区别，感兴趣的朋友可以尝试把 v6 用起来。总体感觉还是挺不错的。