React Router v6如何在同一路由下切换参数导航

要实现点击产品链接时，保留当前路由的前缀和后缀，仅替换:productId参数，核心是获取当前路由的原始模板路径（即定义时带占位符的路径，如/financial/:productId/taxes），再用新参数生成目标路径。

步骤1：获取当前路由的原始模板 #

React Router v6提供的useMatches Hook可以返回当前所有匹配的路由层级数组，数组最后一项就是当前最具体的路由，其path属性就是我们需要的原始模板路径。

步骤2：用新参数生成目标路径 #

使用React Router内置的generatePath工具函数，传入原始模板和新的参数对象，它会自动完成参数替换，还能处理参数的编码问题，比手动字符串替换更安全可靠。

可复用组件示例 #

封装一个ProductLink组件，直接在侧边栏中使用：

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

// 自定义产品跳转链接组件
function ProductLink({ productId, children }) {
  const matches = useMatches();
  // 获取当前匹配的最底层路由
  const currentRoute = matches.at(-1);

  // 基于原始路由模板生成新路径
  const targetPath = generatePath(currentRoute.path, { productId });

  return <Link to={targetPath}>{children}</Link>;
}

侧边栏使用示例 #

function Sidebar() {
  // 模拟产品列表数据
  const productList = [
    { id: 333, name: '产品A' },
    { id: 444, name: '产品B' },
    { id: 555, name: '产品C' }
  ];

  return (
    <aside className="sidebar">
      {productList.map(product => (
        <ProductLink 
          key={product.id} 
          productId={product.id}
        >
          {product.name}
        </ProductLink>
      ))}
    </aside>
  );
}

注意事项 #

• useMatches必须在Router组件（如BrowserRouter）的子组件中使用，否则无法获取路由匹配信息。
• 如果你的路由有多个动态参数，只需在generatePath的参数对象中传入对应参数即可，函数会自动替换所有占位符。

内容的提问来源于stack exchange，提问作者J. L. Muller