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

383次阅读  |  发布于2年以前

一 前言

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

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

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

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

二 基本使用

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

1.jpg

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

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

1 老版本路由

配置老版本路由

入口文件 -> 一级路由

const index = () => {
  return <div className="page" >
    <div className="content" >
      <BrowserRouter>
         <Menus />
         <Switch>
            <Route component={Children} /* children 组件  */
                path="/children"
            ></Route>
            <Route component={Home}     /* home 组件  */
                path={'/home'}
            ></Route>
            <Route component={List}     /* list 组件 */
                path="/list"
            ></Route>
         </Switch>
      </BrowserRouter>
    </div>
  </div>
}

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

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

function Children (){
    return <div>
        这里是 children 页面
       <Menus />
       <Route component={Child1}
           path="/children/child1"
       />
       <Route component={Child2}
           path="/children/child2"
       />

    </div>
}

看一下整体效果：

2.gif

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

3.jpg

路由状态和页面跳转

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

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 <div className="page" >
    <div className="content" >
       <BrowserRouter >
           <Menus />
           <Routes>
              <Route element={<Home />}
                  path="/home"
              ></Route>
              <Route element={<List/>}
                  path="/list"
              ></Route>
              <Route element={<Layout/>}
                  path="/children"
              >
                  <Route element={<Child1/>}
                      path="/children/child1"
                  ></Route>
                  <Route element={<Child2/>}
                      path="/children/child2"
                  ></Route>

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

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

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

5.jpg

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

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

Layout -> 渲染二级路由

function Container(){
  return <div> <Outlet/></div>
}
/* 子路由菜单 */
function Menus1(){
  return <div>
      <Link to={'/children/child1'} > child1 </Link>
      <Link to={'/children/child2'} > child2 </Link>
  </div>
}

function Layout(){
  return <div>
      这里是 children 页面
      <Menus1 />
     <Container />
  </div>
}

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

6.jpg

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

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

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

路由状态和页面跳转

路由状态获取和页面跳转

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

7.jpg

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

function Home (){
    const navigate = useNavigate()
    return <div>
       <button onClick={() => navigate('/list',{ state:'alien' })  }  >
         跳转列表页
      </button>
    </div>
}

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

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

配置：

<Route element={<List/>} path="/list/:id"></Route>

跳转动态路由页面：

<button onClick={()=>{ navigate('/list/1'})}} >跳转列表页</button>

useParams获取动态路由参数

function List(){
    const params = useParams()
    console.log(params,'params') // {id: '1'} 'params'
    return <div>
        let us learn React !
    </div>
}

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

function Index(){
    const [ getParams ,setParam] = useSearchParams()   //第一个参数 getParams 获取 param 等 url  信息, 第二个参数 setParam 设置 url 等信息。
    const name = getParams.getAll('name')
    console.log('name',name)
    return <div>
        hello,world
        <button onClick={()=>{
           setParam({ name:'alien' , age: 29  })  //可以设置 url 中 param 信息
        }}
        >设置param</button>
    </div>
}

useSearchParams 返回一个数组。

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

来看一下演示：

8.gif

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

const routeConfig = [
  {
     path:'/home',
     element:<Home />
  },
  {
     path:'/list/:id',
     element:<List />
  },
  {
     path:'/children',
     element:<Layout />,
     children:[
       { path:'/children/child1' , element: <Child1/> },
       { path:'/children/child2' , element: <Child2/>  }
     ]
  }
]

const Index = () => {
  const element = useRoutes(routeConfig)
  return <div className="page" >
    <div className="content" >
        <Menus />
        {element}
    </div>
  </div>
}

const App = ()=> <BrowserRouter><Index /></BrowserRouter>

如上让结构更加清晰，配置更加灵活。

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

整体架构设计

接下来我们看一下 v6 整体设计：

9.jpg

三 原理分析

上述介绍了从使用上，v5 和 v6 版本路由的区别。接下来，我们重点看一下新版 Route 的原理。以及和老版本有什么区别。

1 新版 Route 设计

老版本的路由，核心的组件是 **Route**，之前的路由原理文章中介绍过，Route 内部通过消费 context 方式，当路由改变的时候，消费 context 的 Route 会重新渲染，内部通过 match 匹配到当前的路由组件是否挂载，那么就是说真正去匹配，去挂载的核心组件为 Route。

而在新版本的 Route 中，对于路由更新，到路由匹配，再到渲染真正的页面组件，这些逻辑主要交给了 Routes ，而且加了一个 branch ‘分支’ 的感念。可以把新版本的路由结构理解一颗分层级的树状结构，也就是当路由变化的时候，会在 Routes 会从路由结构树中，找到需要渲染 branch 分支。此时的 Route 组件的主要目的仅仅是形成这个路由树结构中的每一个节点，但是没有真正的去渲染页面。

新版本的路由可以说把路由从业务组件中解耦出来，路由的配置不在需要制定的业务组件内部，而是通过外层路由结构树统一处理。对于视图则是通过 OutletContext 来逐层传递，接下来我们一起来看一下细节。

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

在新版本的路由中，对于外层的 Router 组件和老版本的有所差别。以 BrowserRouter 为例子，先看一下老版本。

老版本的 BrowserRouter

import { createBrowserHistory as createHistory } from "history";
class BrowserRouter extends React.Component {
  history = createHistory(this.props) 
  render() {
    return <Router history={this.history} children={this.props.children} />;
  }
}

接下来就是新版本的 BrowserRouter， 做了哪些事情呢？

react-router-dom/index.tsx

export function BrowserRouter({
  basename,
  children,
  window
}: BrowserRouterProps) {
  /* 通过 useRef 保存 history 对象  */
  let historyRef = React.useRef<BrowserHistory>();
  if (historyRef.current == null) {
    historyRef.current = createBrowserHistory({ window });
  }

  let history = historyRef.current;
  let [state, setState] = React.useState({
    action: history.action,
    location: history.location
  });
  /* history 变化，通知更新。*/
  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      basename={basename}
      children={children}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
}

新版本的 BrowserRouter 的功能如下：

接下来分析一下新版本 Router 做了哪些事。

react-router/index.tsx

function Router({basename,children,location:locationProp,navigator}){
  /* 形成 navigationContext 对象   保存 basename ， navigator 对象等信息。*/
  let navigationContext = React.useMemo(
    () => ({ basename, navigator, static: staticProp }),
    [basename, navigator, staticProp]
  );
  /* 把 location 里面的状态结构出来  */
  const { pathname, search, hash, state, key } = locationProp
  /* 形成 locationContext 对象，保存 pathname，state 等信息。 */
  let location = React.useMemo(() => {
    /* .... */
     return { pathname, search, hash, state, key  }
  },[basename, pathname, search, hash, state, key])
  /* 通过 context 分别传递 navigationContext 和 locationContext */
   return (
    <NavigationContext.Provider value={navigationContext}>
      <LocationContext.Provider
        children={children}
        value={{ location, navigationType }}
      />
    </NavigationContext.Provider>
  )
}

Router 在新版路由中充当的角色如下：

3 原理深入，Routes 和 branch 概念

上述我们拿 BrowserRouter 为例子，讲解了外层容器做了哪些事。我们继续深入探秘，看一下 routes 内部做了什么事，还有如何形成的路由的层级结构。以及路由跳转，到对应页面呈现的流程。

以如下例子为参考：

<Routes>
   <Route element={<Home />} path="/home" />
   <Route element={<List/>}  path="/list" />
   <Route element={<Layout/>} path="/children" >
      <Route element={<Child1/>} path="/children/child1" />
      <Route element={<Child2/>} path="/children/child2" />
   </Route>
</Routes>

我们带着两个问题去思考。

Route 和 Routes 形成路由结构

上面我们讲到过，新版的 Route 必须配合上 Routes 联合使用。老版本 Route 至关重要，负责匹配和更新容器，那么新版本 Route 又做了哪些事呢？

react-router/index.tsx

function Route(_props){
  invariant(
    false,
    `A <Route> is only ever to be used as the child of <Routes> element, ` +
      `never rendered directly. Please wrap your <Route> in a <Routes>.`
  );
}

刚看到 Route 的同学，可能会发懵，里面没有任何的逻辑，只有一个 invariant 提示。这可能会颠覆很多同学的认识，Route 组件不是常规的组件，可以理解成一个空函数。如果是正常按照组件挂载方式处理，那么肯定会报错误，那么我们写的 <Route> 是怎么处理的呢？实际上一切处理的源头就在 Routes 这个组件，它的作用就是根据路由的变化，匹配出一个正确的渲染分支 branch 。

那么 Routes 就是我们需要重点研究的对象。

Routes 和 useRoutes

首先来看一下 Routes 的实现：

react-router/index.tsx

export function Routes({children,location }) {
  return useRoutes(createRoutesFromChildren(children), location);
}

上面我们讲到了，如果可以用 useRoutes ，可以直接把 route 配置结构变成 element 结构，并且负责展示路由匹配的路由组件，那么 useRoutes 就是整个路由体系核心。

在弄清楚 useRoutes 之前我们先来明白 createRoutesFromChildren 做了些什么？

react-router/index.tsx -> createRoutesFromChildren

function createRoutesFromChildren(children) { /* 从把 变成层级嵌套结构  */
  let routes = [];
  Children.forEach(children, element => {
    /* 省略 element 验证，和 flagement 处理逻辑 */
    let route = {
      caseSensitive: element.props.caseSensitive,  // 区分大小写
      element: element.props.element,              // element 对象 
      index: element.props.index,                  // 索引 index 
      path: element.props.path                     // 路由路径 path
    };
    if (element.props.children) {
      route.children = createRoutesFromChildren(element.props.children);
    }
    routes.push(route);
  });
  return routes;
}

createRoutesFromChildren 可以把 <Route> 类型的 react element 对象，变成了普通的 route 对象结构。我们上面说过了 Route 本质是一个空函数，并没有实际挂载，所以是通过 createRoutesFromChildren 处理转化了。

比如如下的结构:

<Routes>
   <Route element={<Home />} path="/home" />
   <Route element={<List/>}  path="/list" />
   <Route element={<Layout/>} path="/children" >
      <Route element={<Child1/>} path="/children/child1" />
      <Route element={<Child2/>} path="/children/child2" />
   </Route>
</Routes>

element 会被转化成如下结构：

10.jpg

接下来暴露的重点就是 useRoute ，似乎从路由挂载，再到切换路由重新渲染，都和它有关系。那么接下来重点看一下这个自定义 hooks。

react-router/useRoutes

function useRoutes(routes, locationArg) {

    let locationFromContext = useLocation();
   /* TODO: 第一阶段：计算 pathname  */
   // ...代码省略

   /* TODO: 第二阶段：找到匹配的路由分支  */
  let matches = matchRoutes(routes, {
    pathname: remainingPathname
  });
  console.log('----match-----',matches)

  /* TODO: 第三阶段：渲染对应的路由组件 */
  return _renderMatches(matches && matches.map(match => Object.assign({}, match, {
    params: Object.assign({}, parentParams, match.params),
    pathname: joinPaths([parentPathnameBase, match.pathname]),
    pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([parentPathnameBase, match.pathnameBase])
  })), parentMatches);
}

这段代码是 v6 路由比较核心的一部分，为了加强理解，我把它分成三个阶段。

11.jpg

通过上面可以看到，matches 为扁平化后匹配的路由结构，是一个数组结构，那么索引 0 为第一层路由，索引 1 为第二层路由。那么来看一下 matchRoutes 的实现。

matchRoutes 和 _renderMatches 渲染路由分支

react-router/index.tsx -> matchRoutes

function matchRoutes(routes,locationArg,basename){
    /* 扁平化 routes 结构 */
    let branches = flattenRoutes(routes);
    /* 排序 route */
    rankRouteBranches(branches);
    let matches = null;
    /* 通过 matchRouteBranch  */
    for (let i = 0; matches == null && i < branches.length; ++i) {
      matches = matchRouteBranch(branches[i], pathname);
    }
    return matches;
}

12.jpg

扁平化的 branches 里面有一个 routesMeta 属性，存放了每一个 route 信息，比如上面那个 /children/child1 那么本质上有2层路由组成。第一层是 /children，第二层是 /child1；

找到了对应的 matches ，我们知道 matches 里面保存了即将待渲染的路由。那么接下来就是去渲染路由，渲染对应的页面。那么主要就是 _renderMatches 做的事情了，所以我们看一下这个函数做了些什么？

react-router/index.tsx -> _renderMatches

function _renderMatches(matches, parentMatches) {
  if (parentMatches === void 0) {
    parentMatches = [];
  }
  if (matches == null) return null;
  return matches.reduceRight((outlet, match, index) => {
    /* 把前一项的 element ，作为下一项的 outlet */
    return  createElement(RouteContext.Provider, {
      children: match.route.element !== undefined ? match.route.element : /*#__PURE__*/createElement(Outlet, null),
      value: {
        outlet,
        matches: parentMatches.concat(matches.slice(0, index + 1))
      }
    });
  }, null);
}

这段代码很精妙，信息量也非常大，通过 reduceRight 来形成 react 结构 elmenet，这一段解决了三个问题：

1 . 第一层 route 页面是怎么渲染。

首先我们知道 reduceRight 是从右向左开始遍历，那么之前讲到过 match 结构是 root -> children -> child1， reduceRight 把前一项返回的内容作为后一项的 outlet，那么如上的 match 结构会这样被处理。

那么从上面我们都知道 child1 是在 container 中用 Outlet 占位组件的形式渲染的。那么我们先想一下 Outlet 会做哪些事情，应该会用 useContext 把第一层 provider 的 outlet 获取到然后渲染就可以渲染 child1 的 provider 了，而 child1 为 children 也就会被渲染了。我们验证一下猜想是否正确。

react-router/index.tsx -> Outlet

export function Outlet(props: OutletProps): React.ReactElement | null {
  return useOutlet(props.context);
}

react-router/index.tsx -> useOutlet

export function useOutlet(context?: unknown): React.ReactElement | null {
  let outlet = React.useContext(RouteContext).outlet;
  if (outlet) {
    return (
      <OutletContext.Provider value={context}>{outlet}</OutletContext.Provider>
    );
  }
  return outlet;
}

到此为止，整个 v6 渲染原理就很清晰了。

我们把 reduceRight 做的事，用一幅流程图来表示。

13.jpg

路由更新到对应组件渲染展示流程

接下来我们来分析一下如果通过 navigator 实现跳转，比如 home 跳转到 child1 组件，那么会发生哪些事情呢？

整个渲染流程还是比较简单和清晰的。

四 v5 和 v6 区别

上面介绍了 v6 的用法和原理，接下来看一下 v6 和 v5 比较区别是什么？

组件层面上：

使用层面上：

原理层面上：

五 总结

本文主要介绍了 v6 的基本使用，原理介绍，和 v5 区别，感兴趣的朋友可以尝试把 v6 用起来。总体感觉还是挺不错的。

参考资料

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8