React Router v6如何更新现有查询参数而非替换全部？

我用react-router-dom v6的useSearchParams初始化查询参数：

const [searchParams, setSearchParams] = useSearchParams()

const type = searchParams.get("type")
const price = searchParams.get("price")
const availability = searchParams.get("availability")
const location = searchParams.get("location")

随后通过选择框设置不同查询参数：

<Select placeholder='Select car type' onChange={(e) => setSearchParams({type: e.target.value})}>
   <option value='suv'>SUV</option>
   <option value='sedan'>Sedan</option>
   <option value='hatchback'>Hatchback</option>
</Select>
         
<Select placeholder='Select price range' onChange={(e) => setSearchParams({price: e.target.value})}>
   <option value={[10, 30]}>10$ - 30$ / day</option>
   <option value={[31, 60]}>31$ - 60$ / day</option>
   <option value={[61, 100]}>61$ - 100$ / day</option>
</Select>

选择第一个选择框时，查询参数正确：

/search?type=suv

但选择第二个选择框时，预期得到：

/search?type=suv&price=10%2C30

实际却得到：

/search?price=10%2C30

当前调用setSearchParams会替换全部参数，如何实现只更新指定参数、保留其他现有参数？

解决方法 #

方法1：基于现有URLSearchParams实例修改 #

searchParams是URLSearchParams实例，可先复制当前参数，修改目标字段后再传入setSearchParams：

// 车型选择处理
<Select placeholder='Select car type' onChange={(e) => {
  const newParams = new URLSearchParams(searchParams);
  newParams.set("type", e.target.value);
  setSearchParams(newParams);
}}>
   <option value='suv'>SUV</option>
   <option value='sedan'>Sedan</option>
   <option value='hatchback'>Hatchback</option>
</Select>
         
// 价格范围选择处理
<Select placeholder='Select price range' onChange={(e) => {
  const newParams = new URLSearchParams(searchParams);
  newParams.set("price", e.target.value);
  setSearchParams(newParams);
}}>
   <option value={[10, 30]}>10$ - 30$ / day</option>
   <option value={[31, 60]}>31$ - 60$ / day</option>
   <option value={[61, 100]}>61$ - 100$ / day</option>
</Select>

方法2：转为普通对象后合并更新 #

若习惯对象操作，可先将searchParams转为普通对象，再用扩展运算符合并新参数：

// 车型选择处理
<Select placeholder='Select car type' onChange={(e) => {
  const paramsObj = Object.fromEntries(searchParams);
  setSearchParams({...paramsObj, type: e.target.value});
}}>
   <option value='suv'>SUV</option>
   <option value='sedan'>Sedan</option>
   <option value='hatchback'>Hatchback</option>
</Select>
         
// 价格范围选择处理
<Select placeholder='Select price range' onChange={(e) => {
  const paramsObj = Object.fromEntries(searchParams);
  setSearchParams({...paramsObj, price: e.target.value});
}}>
   <option value={[10, 30]}>10$ - 30$ / day</option>
   <option value={[31, 60]}>31$ - 60$ / day</option>
   <option value={[61, 100]}>61$ - 100$ / day</option>
</Select>

额外说明 #

• 若需清空某个参数，可调用newParams.delete("参数名")后再执行更新
• 数组类型参数会被自动转为逗号分隔的字符串，与预期格式匹配

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