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

一 前言

不知不觉 react-router 已经到了 v6 版本了，可能很多同学发现，v6相比之前的 v5 有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了 v6 版本的 react-router，亲身体验发现这还是我认识的 router 吗 ？从 api 到原理都有较大的改动，所以今天就和大家一起看一下新版路由的变化。

对于这次的改动，笔者的建议是：如果是新项目，可以尝试新版本的 Rouer，对于老项目，建议还是不要尝试升级 v6 ，升级的代价是会造成大量的功能改动，而且如果用到了依赖于 router 的第三方库，可能会让这些库失效。 所以一些依赖于 react-router 的第三方库，也需要升级去迎合 v6 版本了，比如笔者之前的缓存页面功能的 react-keepalive-router，也会有大版本的更新。

通过本章节的学习，你将学习到以下内容：

• 新版本路由和老版本的差异，使用区别，API 区别。

• 新版本路由组件 Router ，Routes ，和 Route 的原理。

• Outlet 组件原理。

• useRoutes 原理。

让我们开始今天的 router v6 学习之旅吧。

二 基本使用

首先我们从路由的使用方法上，来看一下 v6 的变化，还是举例一个场景。比如有如下的路由结构：

1.jpg

如上图所示，页面分为简单的 2 级路由结构：

• 第一级页面有 home 页面， list 页面，和 children 页面。

• 第二级页面是 children 页面的子路由，包括：child1 和 child2。

接下来看一下，新老版本路由在使用上有什么区别。

1 老版本路由

配置老版本路由

入口文件 -> 一级路由

const index = () => {
  return 
    
      
         
         
            
            
            
         
      
    

  

}

上述为配置的一级路由的情况。我们看一下大体的功能职责分配：

• BrowserRouter ：通过 history 库，传递 history 对象，location 对象。

• **Switch**：匹配唯一的路由 Route，展示正确的路由组件。

• **Route**：视图承载容器，控制渲染 UI 组件。

如上是一级路由的配置和对应组件的展示，接下来看一下二级路由的配置，二级路由配置在 Children 中：

function Children (){
    return 

        这里是 children 页面
       
       
       

    
}

• 可以看到在 Children 中，有 Child1 和 Child2 两个组件。

看一下整体效果：

2.gif

那么整体路由层级的结构图，如下所示（重点看和 v6 的整体设计的区别 ）：

3.jpg

路由状态和页面跳转

v5可以通过以下方式获取路由状态

• **props + Route**：Route 承载的 ui 组件可以通过 props 来获取路由状态，如果想要把路由状态传递给子孙组件，那么可以通过 props 逐层传递的方式。

• withRouter ：withRouter 是一个高阶组件 HOC ，因为默认只有被 Route 包裹的组件才能获取到路由状态，如果当前非路由组件想要获取状态，那么可以通过 withRouter 包裹来获取 history ，location 等信息。

• useHistory ：函数组件可以通过 useHistory 获取 history 对象。

• useLocation ：函数组件可以通过 useLocation 获取 location 对象。

v5通过以下方式实现路由跳转

上面介绍了路由状态获取，那么还有一个场景就是切换路由，那么 v5 主要是通过两种方式改变路由：

• 通过 react-router-dom 内置的 Link， NavLink 组件来实现路由跳转。

• 通过 history 对象下面的路由跳转方法，比如 push 等，来实现路由的跳转。

整体架构设计

路由状态传递

至于在 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 的整体设计：

4.jpeg

以上是整个 react-router v5 的模块设计。

2 v6 router 尝鲜

接下来我们使用 react-router v6 版本尝鲜。用 v6 实现上述功能。

新版本路由配置

入口文件 -> 整体路由配置

import { Routes , Route , Outlet  } from 'react-router
import { BrowserRouter } from 'react-router-dom'
const index = () => {
  return 
    
       
           
           
              }
                  path="/home"
              >
              }
                  path="/list"
              >
              }
                  path="/children"
              >
                  }
                      path="/children/child1"
                  >
                  }
                      path="/children/child2"
                  >
              
           
       
    

  

}

如上，我们用 v6 版本的 router 同样实现了嵌套二级路由功能。通过如上代码我们可以总结出：

1. 在 v6 版本中 BrowserRouter 和 HashRouter 还是在整个应用的最顶层。提供了 history 等核心的对象。

1. 在新版的 router 中，已经没有匹配唯一路由的 Switch 组件，取而代之的是 Routes 组件，但是我们不能把 Routes 作为 Switch 的代替品。因为在新的架构中 ，Routes 充当了很重要的角色，在 react-router路由原理 文章中，曾介绍到 Switch 可以根据当前的路由 path ，匹配唯一的 Route 组件加以渲染。但是 Switch 本身是可以被丢弃不用的，但是在新版的路由中， Routes 充当了举足轻重的作用。比如在 v5 中可以不用 Switch 直接用 Route，但是在 v6 中使用 Route ，外层必须加上 Routes 组件，也就是 Routes -> Route 的组合。

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

5.jpg

这个同学们在开发的时候需要注意。

1. 对于新版本的路由，嵌套路由结构会更加清晰，比如在老版本的路由中，配置二级路由，需要在业务组件中配置，就像在第一个例子中，我们需要在 Children 组件中进行二级路由的配置。但是在 v6 中，对于配置子代路由进行了提升，可以在子代路由直接写在 Route 组件里，如上将 Child1 和 Child2 直接写在了 /children 的路由下面，那么有的同学会疑问，那么子路由将渲染在哪里，答案当然是上述的 Layout 组件内。那么就看一下 Layout 中是如何渲染的子代路由组件。

Layout -> 渲染二级路由

function Container(){
  return 
 
}
/* 子路由菜单 */
function Menus1(){
  return 

       child1 
       child2 
  
}

function Layout(){
  return 

      这里是 children 页面
      
     
  
}

• 如上我们可以看到，Layout 并没有直接渲染二级子路由，而是只有一个 Container， Container 内部运用了 v6 Router 中的 Outlet 。而 Outlet 才是真正渲染子代路由的地方，也就是 Child1 和 Child2 。这里的 Outlet 更像是一张身份卡，证明了这个就是真正的路由组件要挂载的地方，而且不受到组件层级的影响 （可以直接从上面看到，Outlet 并没有在 Layout 内部，而是在 Container ），这种方式更加清晰，灵活，能够把组件渲染到子组件树的任何节点上。

那么总结一下路由结构图如下所示：

6.jpg

通过如上对比，可以看出 v6 大致上和 v5 的区别。这里对功能方面做了一下总结：

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

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

接下来看一下 v6 的其他功能。

路由状态和页面跳转

路由状态获取和页面跳转

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

7.jpg

1. 路由跳转：新版路由提供了 useNavigate ，实现路由的跳转。具体用法参考如下代码：

function Home (){
    const navigate = useNavigate()
    return 

        navigate('/list',{ state:'alien' })  }  >
         跳转列表页
      
    
}

navigate：第一参数是跳转路径，第二个参数是描述的路由状态信息，可以传递 state 等信息。

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

配置：

} path="/list/:id">

跳转动态路由页面：

{ navigate('/list/1'})}} >跳转列表页

useParams获取动态路由参数

function List(){
    const params = useParams()
    console.log(params,'params') // {id: '1'} 'params'
    return 

        let us learn React !
    
}

1. url参数信息获取：， 新版路由提供 useSearchParams 可以获取 ｜ 设置 url 参数。比如如下例子：

function Index(){
    const [ getParams ,setParam] = useSearchParams()   //第一个参数 getParams 获取 param 等 url  信息, 第二个参数 setParam 设置 url 等信息。
    const name = getParams.getAll('name')
    console.log('name',name)
    return 

        hello,world
        {
           setParam({ name:'alien' , age: 29  })  //可以设置 url 中 param 信息
        }}
        >设置param
    
}

useSearchParams 返回一个数组。

1 数组第一项，getParams 获取 url 参数信息。2 数组第二项，setParam  设置 url 参数信息。

来看一下演示：

8.gif

1. 配置更加灵活。 在 v5 版本中，通过 options 到路由组件的配置，可以用一个额外的路由插件，叫做 react-router-config 中的 renderRoutes 方法。在 v6 版本中提供了自定义 hooks useRoutes 让路由的配置更加灵活。来看一下具体的使用。

const routeConfig = [
  {
     path:'/home',
     element:
  },
  {
     path:'/list/:id',
     element:
  },
  {
     path:'/children',
     element:,
     children:[
       { path:'/children/child1' , element:  },
       { path:'/children/child2' , element:   }
     ]
  }
]

const Index = () => {
  const element = useRoutes(routeConfig)
  return 
    
        
        {element}