React Router 的 handle 和 useMatches 的作用、场景和联系

1. 什么是 handle？

• handle 是你可以在路由模块里自定义的一个对象。
• 它不会影响页面渲染，也不是 React Router 内部用的"保留字段"。
• 它的作用是：为当前路由挂载任意自定义数据，供后续在页面或全局逻辑中读取和使用。

例子

export const handle = {
  breadcrumb: "首页",
  permission: "admin",
  customData: { foo: 123 }
};

你可以把任何你想挂在路由上的数据都写在 handle 里。

2. useMatches 是什么？

• useMatches 是 React Router 提供的一个 Hook。
• 它可以拿到当前匹配到的所有路由信息（从根到当前页面的每一级路由）。
• 每个路由的信息里都包含你在路由模块里定义的 handle。

典型用法

import { useMatches } from "react-router-dom";

function Breadcrumbs() {
  const matches = useMatches();
  // matches 是一个数组，包含每一级路由的信息
  return (
    <nav>
      {matches.map((match) =>
        match.handle?.breadcrumb ? (
          <span key={match.id}>{match.handle.breadcrumb} / </span>
        ) : null
      )}
    </nav>
  );
}

这样你就可以用 handle 里的 breadcrumb 字段自动生成面包屑导航。

3. 典型应用场景

• 面包屑导航：每一级路由 handle 里定义 breadcrumb 字段，动态生成导航。
• 权限控制：handle 里定义权限标识，统一做路由级权限校验。
• 页面元数据：如 SEO 信息、页面类型、统计埋点等。
• 自定义扩展：如菜单高亮、A/B 测试参数等。

4. 总结

• handle：让你给路由挂自定义数据，完全由你决定内容和结构。
• useMatches：让你在组件里获取所有当前路径下的路由信息（包括 handle），实现全局或多级路由相关的功能。

一句话理解

handle 就像"路由的自定义属性"，useMatches 能获取到每一级路由的 handle，方便你做面包屑、权限、菜单等全局功能。