react-router/v5之Router、Route、Red

概述

首先，简单概括一下Router、Route、Redirect、Switch的作用：

Router：创建一个context上下文对象，并添加history、location等全局变量。BrowerRouter、HashRouter只是调用了history不同的方法

Route：创建一个组件，当前路由与其path匹配时，返回对应的组件，否则返回null。

Redirect：创建一个组件，只要组件被挂载或更新时，就会执行重定向。注意，这个组件内部是不进行路由匹配的

Switch：Switch的作用是循环遍历子节点childrens数组，依次和当前路由进行匹配，只要匹配到就结束循环，返回匹配到的路由。

特别说明：

Route内部进行的路由匹配是独立的，也就是如果有多个Route同时和当前路由匹配，会把所有匹配到的路由都渲染，Switch的作用就是控制Route只匹配一次。

Redirect本身是不进行路由匹配的，所以需要依赖Switch的路由匹配逻辑。也就是说，使用Redirect时必须使用Switch作为父节点。

Switch进行路由匹配时，遍历的子节点只是一级子节点，并不会去遍历孙节点。所以，Route、Redirect只能作为Switch的一级子节点，如果有嵌套路由，每级路由都需要加上Switch

源码解析

了解了基本原理，我们来看一看源码实现。