走一圈 React Router

React Router 版本为 v6.

从简单的 demo, 逐渐看看 react router 是如何运作的, Go.

BrowserRouter

<BrowserRouter>
  <App />
</BrowserRouter>

BrowserRouter 将创建 history 并监听(pushState/popstate event), history 传入到 navigator 以供后续 useNavigate 使用, 然后直接渲染 App

useRoutes

创建完 Router, 就可以使用 useRoutes 配置路由. 当然, 你也可以使用 Routes+Route 组件设定.

拍平路由并计算优先级

先将所有设定路由拍平为一维数组, 如上图 [/, /about, /*], 再按路径计算后的优先级排序以用于匹配

const paramRe = /^:\w+$/
const dynamicSegmentValue = 3
const indexRouteValue = 2
const emptySegmentValue = 1
const staticSegmentValue = 10
const splatPenalty = -2
const isSplat = (s: string) => s === '*'

function computeScore(path: string, index: boolean | undefined): number {
  // 将路径拆开
  let segments = path.split('/')
  // 初始优先级为路径层级
  let initialScore = segments.length
  // 如含有 `*`, 降低优先级, 如 /a/*
  if (segments.some(isSplat)) {
    initialScore += splatPenalty
  }

  // 索引页
  if (index) {
    initialScore += indexRouteValue
  }

  return segments
    .filter((s) => !isSplat(s))
    .reduce(
      (score, segment) =>
        score +
        (paramRe.test(segment)
          ? dynamicSegmentValue // 动态参数 如 :p
          : segment === ''
          ? emptySegmentValue
          : staticSegmentValue), // 静态路径 如 /a/b/c 优先级最高
      initialScore
    )
}

匹配后的路由会进入渲染 _renderMatches

function _renderMatches(
  matches: RouteMatch[] | null,
  parentMatches: RouteMatch[] = []
): React.ReactElement | null {
  if (matches == null) return null

  /**
   * location: '/about'
   * matches: [
   *   {path: '/', ...},
   *   {path: '/about', ...}
   * ]
   */
  return matches.reduceRight((outlet, match, index) => {
    return (
      /**
       * 将匹配路由嵌套层级, 形成
       * Provider<{
       *   path: '/',
       *     children: 设定的element,
       *     outlet: Provider<{ // 嵌套的路由
       *       path: '/about',
       *       children: 设定的element,
       *       outlet: null
       *    }>
       * }>,
       * 当渲染 `/` 时, Provider会将设定的value(outlet)设置到RouteContext中
       * 所以当某层级含有 <Outlet /> 时, 渲染的即为当层嵌套路由 (见下)
       *
       */
      <RouteContext.Provider
        children={
          match.route.element !== undefined ? match.route.element : <Outlet />
        }
        value={{
          outlet,
          matches: parentMatches.concat(matches.slice(0, index + 1)),
        }}
      />
    )
  }, null as React.ReactElement | null)
}

Provider 更新详见 ReactFiberBeginWork.new.js

Outlet

最后, 在需要的地方渲染 Outlet 组件, 它将根据路由匹配的结果, 渲染相应的组件.

获取 RouteContext 对应的 outlet 直接渲染就是了.

其它

其它例如 useNavigate, useParams, useLocation 基本都是简单几行代码, 就不再赘述了.

-- Fin --