React Router中如何实现同名多ID参数的处理？

嘿，我来帮你搞定React Router里处理多个同名参数的问题！

针对你需要支持n个resourceid的商品对比场景，用查询字符串的方式是最灵活的方案，完全不需要限制参数数量，下面一步步给你讲实现方法：

1. 路由无需特殊配置 #

因为参数是放在查询字符串里，不是路径参数，所以你的对比页面路由可以直接写成常规形式，不管传多少个resourceid都能匹配：

<Route path="/compare" element={<ProductCompare />} />

2. 获取多个同名参数值 #

React Router的useSearchParams钩子提供了getAll()方法，专门用来获取同名的多个参数，返回结果是一个数组，完美适配你的需求。

在ProductCompare组件里这样用：

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

function ProductCompare() {
  const [searchParams] = useSearchParams();
  
  // 提取所有resourceid参数，返回类似["1", "2", "3"]的数组
  const resourceIds = searchParams.getAll('resourceid');

  // 如果需要转成数字类型，再加一步转换
  // const resourceIds = searchParams.getAll('resourceid').map(id => parseInt(id, 10));

  console.log('要对比的商品ID:', resourceIds);

  return (
    <div>
      <h2>商品对比页</h2>
      <p>当前选中的商品ID：{resourceIds.join(', ')}</p>
      {/* 这里编写你的商品对比逻辑和渲染代码 */}
    </div>
  );
}

export default ProductCompare;

不管URL是/compare?resourceid=123还是/compare?resourceid=123&resourceid=456&resourceid=789，resourceIds都会准确拿到所有参数值。

3. 生成带多个同名参数的跳转URL #

如果需要从其他页面（比如商品列表页）跳转到对比页，用URLSearchParams的append()方法可以轻松生成带多个resourceid的URL：

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

function ProductList() {
  const navigate = useNavigate();

  const handleGoToCompare = (selectedIds) => {
    const searchParams = new URLSearchParams();
    // 循环添加每个选中的商品ID
    selectedIds.forEach(id => {
      searchParams.append('resourceid', id);
    });
    // 跳转到对比页并带上查询参数
    navigate(`/compare?${searchParams.toString()}`);
  };

  return (
    <div>
      <button onClick={() => handleGoToCompare(['123', '456', '789'])}>对比选中商品</button>
    </div>
  );
}

这里一定要用append()而不是set()，因为set()会覆盖同名参数，而append()会持续添加新的参数项。

额外提醒 #

之前你看到的固定数量路径参数方案（比如/compare/:id1/:id2）确实不够灵活，而查询字符串的方式完全摆脱了参数数量的限制，非常适合你的n个商品对比场景。

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