如何获取含动态分段的当前活跃路由未解析路径？

你可以通过React Router的useMatches钩子获取当前匹配路由的未解析路径模式（即定义路由时的path值，比如dashboard/:companyId），结合generatePath就能实现全局替换companyId的需求。

核心实现代码 #

import { useMatches, useParams, generatePath, useNavigate } from 'react-router-dom';

function GlobalCompanySelector() {
  const params = useParams();
  const matches = useMatches();
  const navigate = useNavigate();

  // 找到包含companyId参数的当前最具体路由匹配项
  const targetRoute = matches.find(match => 
    Object.keys(match.params).includes('companyId')
  );

  const switchCompany = (newCompanyId) => {
    if (!targetRoute || !params.companyId) return;

    // 生成替换companyId后的新路径
    const newPath = generatePath(targetRoute.path, {
      ...params,
      companyId: newCompanyId
    });

    // 跳转到新路径
    navigate(newPath);
  };

  return (
    <div>
      <label>选择公司：</label>
      <select onChange={(e) => switchCompany(e.target.value)}>
        <option value="company1">公司1</option>
        <option value="company2">公司2</option>
        <option value="xyz">XYZ公司</option>
      </select>
    </div>
  );
}

关键逻辑说明 #

1. useMatches的作用：它返回当前所有匹配的路由层级数组，每个数组元素包含路由定义时的path（未解析路径模式）、params（已解析的参数）等信息。我们通过筛选包含companyId参数的匹配项，就能拿到对应的未解析路径。
2. generatePath生成新路径：传入未解析的路径模式和更新后的参数对象，就能自动生成替换后的完整路径，完美覆盖你需要的场景：
   • /dashboard/company1 → /dashboard/company2
   • /dashboard/company1/details → /dashboard/company2/details
   • /settings/company1 → /settings/company2

更精准的路由匹配方案 #

如果担心其他路由意外包含companyId参数导致匹配错误，可以在定义路由时添加自定义元信息，通过元信息筛选目标路由：

// 路由定义示例
const routes = [
  {
    path: '/dashboard/:companyId',
    element: <Dashboard />,
    meta: { requiresCompany: true } // 添加自定义标识
  },
  {
    path: '/dashboard/:companyId/details',
    element: <CompanyDetails />,
    meta: { requiresCompany: true }
  },
  {
    path: '/settings/:companyId',
    element: <CompanySettings />,
    meta: { requiresCompany: true }
  }
];

// 组件中筛选路由
const targetRoute = matches.find(match => match.meta?.requiresCompany);

这种方式更严谨，避免非目标路由被误匹配。

内容的提问来源于stack exchange，提问作者cbn-falias