React Router 6中如何替换路由参数？

在 React Router 6 中，确实移除了 v5 里无需指定模式就能获取当前路径模板的 useRouteMatch() 用法，但可以通过 useMatches 钩子实现相同需求——在任意路由结构下保留当前 URL 结构，仅替换特定参数。

实现代码 #

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

const LinkReplaceItemId = ({ itemId }) => {
  // 获取所有匹配的路由层级，最后一项为当前组件所在的路由
  const matches = useMatches();
  const currentRoute = matches[matches.length - 1];
  // 获取当前路由的所有参数
  const currentParams = useParams();

  // 基于当前路由的路径模板，替换目标参数生成新路径
  return (
    <Link to={generatePath(currentRoute.path, { ...currentParams, itemId })}>
      Link
    </Link>
  );
};

核心逻辑说明 #

1. useMatches()：返回从根路由到当前组件的所有匹配路由数组，取最后一项即可得到当前组件对应的路由定义（包含路径模板 path）。
2. useParams()：获取当前路由的所有路径参数，确保保留除目标参数外的其他参数。
3. generatePath()：基于当前路由的路径模板和更新后的参数，生成符合规则的新路径，自动处理参数编码等细节，避免手动拼接路径的潜在问题。

这个方案完全适配你提到的多路由场景（/items/:itemId、/users/:userId/items/:itemId、/collections/:itemId/properties），无论组件处于哪种路由结构下，都能准确保留原有路径结构，仅替换指定的 itemId 参数。

内容的提问来源于stack exchange，提问作者Gergő Horvát