如何让React-Router useNavigate生成&分隔的多值搜索参数？

我有如下数据：

const basket = {
  type: 'fruits',
  filter: 'sour',
  filter: 'sweet',
}

我正在使用React-Router的useNavigate()，选择列筛选器后跳转到另一页面，需要生成格式如下的查询字符串：

"https://www.abcmart.com?type=fruits&filter=sour&filter=sweet"

尝试将筛选器传入useNavigate()的search参数时，多值搜索参数（string[]）始终被转为逗号分隔，导致查询字符串变成"type=fruits&filter=sour,sweet"，而非"filter=sour&filter=sweet"。单值参数会用&拼接，但数组会被转为逗号分隔，试过多种转换和替换方法都无效。

原始代码：

basket = {
  type: 'fruits',
  filter: ['sour', 'sweet'],
}
useNavigate({
  to: 'abcmart',
  search: {
    ...basket,
  }
})

我尝试过转换string[]并替换，但useNavigate仍会将其转为逗号分隔；甚至尝试用React-Router的useSearchParams生成，但不允许重复声明filter名称。该如何操作才能让useNavigate将数组转换为&分隔的多值参数？

方法1：手动构建搜索参数字符串 #

直接通过URLSearchParams的append方法重复添加同键参数，绕开React-Router默认的数组序列化规则：

const basket = {
  type: 'fruits',
  filter: ['sour', 'sweet'],
};

// 构建符合要求的搜索参数
const searchParams = new URLSearchParams();
searchParams.append('type', basket.type);
basket.filter.forEach(item => {
  searchParams.append('filter', item);
});

// 导航时传入生成的字符串
useNavigate({
  to: 'abcmart',
  search: searchParams.toString(),
});

这种方式会生成type=fruits&filter=sour&filter=sweet格式的查询字符串，完全匹配需求。

方法2：自定义通用序列化函数 #

如果需要复用这种多值参数的序列化逻辑，可以封装一个通用函数：

function serializeMultiValueParams(params) {
  const searchParams = new URLSearchParams();
  Object.entries(params).forEach(([key, value]) => {
    if (Array.isArray(value)) {
      value.forEach(item => searchParams.append(key, item));
    } else {
      searchParams.append(key, value);
    }
  });
  return searchParams.toString();
}

// 调用示例
useNavigate({
  to: 'abcmart',
  search: serializeMultiValueParams(basket),
});

补充说明 #

• React Router默认会将数组序列化为逗号分隔字符串，这是内置规则，直接传数组对象会被自动处理成该格式。
• 之前用useSearchParams失败，是因为误用了set方法（会覆盖同键值），实际上useSearchParams返回的searchParams对象也支持append方法添加重复键，只是不适合直接用于useNavigate的参数传入场景。

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