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

1. 什么是 handle?

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

例子

js 复制代码
export const handle = {
  breadcrumb: "首页",
  permission: "admin",
  customData: { foo: 123 }
};

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

2. useMatches 是什么?

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

典型用法

jsx 复制代码
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,方便你做面包屑、权限、菜单等全局功能。

相关推荐
灵感__idea12 分钟前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴1 小时前
Mix
前端·webgl
代码续发1 小时前
前端组件梳理
前端
试图让你心动2 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码3 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记3 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏3 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数3 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante3 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam4 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript