React中如何从useLocation获取匹配路由的原始路径？

方法一：使用useMatch钩子（适用于单个路由组件） #

在需要获取模板路径的路由组件（比如ProjectDashboard）中，直接用useMatch传入对应的路由模板路径，返回的匹配信息里，match.path就是带参数占位符的目标路径：

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

function ProjectDashboard() {
  const match = useMatch("/admin/project/:id/dashboard");
  // 输出 "/admin/project/:id/dashboard"
  console.log(match.path);
  return <div>项目看板</div>;
}

方法二：使用matchRoutes结合路由配置数组（全局/布局组件中使用） #

如果要在布局组件或非直接路由渲染的组件中获取，先把路由配置转为数组形式，再通过matchRoutes匹配当前路径：

第一步：将路由配置转为数组 #

const routes = [
  {
    path: "/admin/project/:id",
    element: <ProjectLayout />,
    title: "ProjectLayout",
    children: [
      {
        path: "/admin/project/:id/dashboard",
        element: <ProjectDashboard />,
        title: "ProjectDashboard"
      },
      {
        path: "/admin/project/:id/tasks",
        element: <ProjectTasks />,
        title: "ProjectTasks"
      }
    ]
  }
];

提示：子路由可以简化为相对路径，比如把"/admin/project/:id/dashboard"改成"dashboard"，最终匹配的模板路径会自动拼接为完整的/admin/project/:id/dashboard，不影响后续获取。

第二步：在组件中获取匹配的路由模板 #

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

function ProjectLayout() {
  const location = useLocation();
  // 匹配当前路径对应的路由项
  const matchedRoutes = matchRoutes(routes, location);
  // 取最后一项，即当前最具体的路由
  const currentRoute = matchedRoutes.at(-1);
  
  // 输出对应的模板路径，比如 "/admin/project/:id/dashboard"
  console.log(currentRoute.route.path);
  return <div>{/* 布局内容 */}</div>;
}

不推荐的硬编码方式 #

如果是临时简单场景，也可以手动拼接模板路径，但这种方式灵活性差，路由变更时需要同步修改：

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

function ProjectTasks() {
  // 仅作示例，实际不建议硬编码
  const templatePath = "/admin/project/:id/tasks";
  console.log(templatePath);
  return <div>任务列表</div>;
}

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