React Router v6如何获取带参数名的路由路径？

要拿到带参数名（比如/main/:id）的原始路由路径，不能直接通过useLocation实现，因为它返回的是填充了实际参数值的路径。你可以通过React Router提供的matchRoutes函数结合路由配置数组来实现：

1. 先整理路由配置为数组（如果还没这么做的话），方便后续匹配：

// 路由配置数组
const routes = [
  { path: "/main/:id", element: <Page /> },
  // 其他路由配置...
];

2. 在目标组件（Page）中使用matchRoutes匹配当前路由：

import { useLocation, matchRoutes } from "react-router-dom";

function Page() {
  const location = useLocation();
  // 匹配当前路径对应的路由配置
  const matchedRoute = matchRoutes(routes, location)?.[0];
  
  if (matchedRoute) {
    const originalPath = matchedRoute.route.path;
    console.log(originalPath); // 输出 "/main/:id"
  }

  return <div>页面内容</div>;
}

原理说明 #

matchRoutes会根据当前的location对象，在你提供的路由配置数组中找到最匹配的路由项，然后你就能从匹配结果中拿到路由配置里定义的原始path（也就是带:id这种参数占位符的路径）。

如果你的项目是用JSX方式直接写<Route>而没有单独的路由数组，建议抽成数组形式，这样不仅能实现这个需求，也便于路由的统一管理和复用。

内容的提问来源于stack exchange，提问作者sir-haver