如何获取React-Router中Route对象的属性？

嘿，我来给你捋捋怎么在React Router里获取Route对象的各种属性～

首先先明确下官方定义的Route对象类型结构，方便你对照要拿的属性：

interface RouteObject {
  path?: string;
  index?: boolean;
  children?: RouteObject[];
  caseSensitive?: boolean;
  id?: string;
  loader?: LoaderFunction;
  action?: ActionFunction;
  element?: React.ReactNode | null;
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
}

接下来分享几种常用的获取方式：

• 用useMatches()钩子获取所有匹配的路由信息
  这是React Router v6+最直接的方式，它会返回当前页面所有匹配到的路由数组，每个数组元素里包含了对应Route对象的完整属性，还有匹配后的路径、参数等信息。
  举个实际例子：

  import { useMatches } from 'react-router-dom';
  
  function CurrentRouteInfo() {
    const matches = useMatches();
    // 数组最后一项就是当前最精准匹配的路由
    const currentMatch = matches[matches.length - 1];
    
    if (currentMatch) {
      // 直接访问Route对象的属性
      console.log('路由路径:', currentMatch.route.path);
      console.log('是否是index路由:', currentMatch.route.index);
      console.log('是否区分大小写:', currentMatch.route.caseSensitive);
    }
  
    return (
      <div>
        当前路由路径：{currentMatch?.route.path}
      </div>
    );
  }
  

• 通过路由id精准定位目标Route
  如果你的路由配置里给特定路由设置了id属性，还可以用useMatches()筛选出对应id的路由，这样能精准拿到你想要的那个Route对象：

  import { useMatches } from 'react-router-dom';
  
  function TargetRouteInfo() {
    const matches = useMatches();
    // 筛选出id为"user-profile"的路由
    const targetRoute = matches.find(match => match.route.id === 'user-profile');
  
    if (targetRoute) {
      console.log('目标路由的错误兜底组件:', targetRoute.route.errorElement);
      console.log('目标路由的loader函数:', targetRoute.route.loader);
    }
  
    return <div>...</div>;
  }
  

另外补充下：如果你只是需要路由的参数、当前路径这类运行时信息，用useParams()、useLocation()这些针对性的钩子会更方便，但这些是路由的动态信息，不是Route对象本身的配置属性哦～

内容来源于stack exchange