React Router v6中如何获取含自定义属性的路由对象？

在React Router v6及以上版本中，你可以直接用内置的useMatches钩子获取当前匹配到的所有路由节点，其中包含你定义的带自定义属性的完整路由对象，完全不用自己遍历路由配置或者重复定义新对象。

具体实现步骤 #

• 导入react-router-dom中的useMatches钩子
• 在组件中调用该钩子，获取匹配到的路由数组
• 从数组中提取对应的路由对象（通常取最后一项作为当前最具体的路由）

代码示例 #

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

function LayoutComponent() {
  const matches = useMatches();
  
  // 获取当前最具体的匹配路由（数组最后一项）
  const currentRoute = matches.at(-1)?.route;

  // 直接使用自定义属性做逻辑判断
  return (
    <div>
      {currentRoute?.topBar !== false && <TopBar />}
      {currentRoute?.sideBar && <SideBar />}
      <main>当前页面：{currentRoute?.name}</main>
    </div>
  );
}

关键说明 #

• useMatches返回的是一个数组，每一项对应一个匹配到的路由层级（从根路由到当前子路由）
• 每个数组项的route属性就是你最初定义的路由配置对象，包含所有自定义的name、topBar、sideBar等属性
• 可以通过数组索引获取不同层级的路由，比如matches[1]?.route对应根路由下的直接子路由（比如/projects或/blog）
• 该钩子只能在被<Router>组件包裹的路由上下文内使用

内容的提问来源于stack exchange，提问作者Joel Mason