如何用React Router构建数组格式Query Params及相关疑问

1. 生成key[]=val1&key[]=val2格式的参数 #

useSearchParams返回的searchParams是标准URLSearchParams实例，它的set方法会把数组自动转为逗号分隔的字符串，这就是你得到vegetable=tomato%2Clechuce的原因。要生成目标格式的参数，需要：

• 将参数名设为vegetable[]（带方括号）
• 使用append方法逐个添加数组元素，而非set

示例代码：

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

const [searchParams, setSearchParams] = useSearchParams()

// 可选：清空已存在的同名参数，避免重复
searchParams.delete('vegetable[]')
// 逐个添加数组元素
searchParams.append('vegetable[]', 'tomato')
searchParams.append('vegetable[]', 'lechuce')

// 此时searchParams.toString()输出：vegetable[]=tomato&vegetable[]=lechuce

2. 关于URL查询参数的更新与?的处理 #

你不需要手动拼接?或调用navigate来更新当前页面的查询参数，react-router-dom的setSearchParams方法可以直接完成：

• 调用setSearchParams(searchParams)会自动更新当前路由的查询参数，正确添加开头的?（当存在参数时）
• 只有需要跳转到其他路径并携带参数时，才需要结合navigate使用

示例代码（直接更新当前URL的查询参数）：

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

const [searchParams, setSearchParams] = useSearchParams()

// 构造参数
searchParams.delete('vegetable[]')
searchParams.append('vegetable[]', 'tomato')
searchParams.append('vegetable[]', 'lechuce')

// 直接更新URL，无需手动拼接
setSearchParams(searchParams)

如果确实需要跳转到其他路径并带参数，可简化写法：

import { useNavigate, useLocation } from 'react-router-dom'

const navigate = useNavigate()
const location = useLocation()

// 构造参数后，通过navigate的配置项传递search
navigate(location.pathname, {
  search: searchParams.toString()
})

这种写法会自动处理?的添加，无需手动拼接字符串。

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