React Router v6中useRouteMatch的等效实现方案

实现原理 #

React Router v6 渲染路由组件时，内部已经完成了全量路径匹配，不需要重复调用matchRoutes遍历路由表做二次计算，直接读取路由上下文中存储的现成匹配结果即可，性能和v5原生API持平，完全适配接口动态生成路由的场景。

自定义钩子代码 #

无参调用，直接返回当前组件所属路由的路径匹配规则：

import { useContext } from 'react';
import { RouteContext } from 'react-router-dom';

const useCurrentRoutePath = () => {
  const { matches } = useContext(RouteContext);
  // 取匹配链最内层，即当前组件对应的路由配置
  const currentMatch = matches[matches.length - 1];
  return currentMatch?.route?.path;
};

用法 #

和v5的useRouteMatch使用逻辑几乎一致，原有业务代码改动极小：

import { generatePath, Link } from 'react-router-dom';

const ProductPage = () => {
  const pathPattern = useCurrentRoutePath();

  return (
    <div>
      <Link to={generatePath(pathPattern, { id: 1 })}>关联商品1</Link>
      <Link to={generatePath(pathPattern, { id: 2 })}>关联商品2</Link>
    </div>
  );
};

该实现会自动适配动态路径前缀：多语言场景下，访问/en/product/100时生成的链接为/en/product/1，访问/es/producto/100时链接自动适配为/es/producto/1，不需要硬编码任何路径前缀。

方案特性 #

• 高性能：直接复用框架内部已完成的匹配结果，无额外遍历、无重复正则计算，哪怕路由表有上千条配置也不会产生性能损耗
• 适配动态路由：不管路由配置是本地硬编码还是接口异步下发，只要路由被正常注册渲染，就能正确读取到路径规则
• 支持嵌套路由：返回的matches数组按嵌套层级存储了所有命中的路由配置，需要获取父级路由规则时直接取对应索引即可，比如matches[matches.length - 2]就是当前路由的直接父级配置
• 版本兼容：适配React Router v6所有正式版本，RouteContext是v6路由渲染的核心上下文，从首个正式版发布至今核心字段结构没有破坏性变更

不推荐matchRoutes方案的原因 #

matchRoutes每次执行都会全量遍历传入的路由表，对每个路由重新执行匹配逻辑，在路由体量较大、组件重渲染频繁的场景下会有明显性能问题；如果是动态路由场景，还需要额外维护一份全量路由表传入方法，维护成本很高。

内容的提问来源于stack exchange，提问作者Kevin Farrugia