如何在Next.js路由中基于已有查询参数添加新的QueryParams？

这个问题的核心在于保留当前已有的查询参数，再将新参数合并进去，而不是直接替换整个query对象。你之前的两种方法都没做到这一点，所以才会出现问题，下面给你具体的解决思路和代码：

正确的实现方式 #

在Next.js中，router.query会存储当前URL上的所有查询参数，我们可以利用ES6的扩展运算符（...）把现有参数和新参数合并，这样就能实现"持续添加"的效果：

第一步：添加sortBy=price参数 #

router.push({
  pathname: router.pathname, // 直接复用当前路由的pathname，比手动拼接`/category/${router.query.index}`更通用
  query: { ...router.query, sortBy: "price" }
})

这行代码会保留当前所有已有的查询参数（如果有的话），再新增sortBy=price，最终得到/category/men-and-women?sortBy=price。

第二步：继续添加maxPrice=1232参数 #

router.push({
  pathname: router.pathname,
  query: { ...router.query, maxPrice: 1232 }
})

这时候router.query已经包含了之前的sortBy=price，合并后就会得到/category/men-and-women?sortBy=price&maxPrice=1232。

为什么你之前的方法不行？ #

• 第一种方法：你直接赋值了一个全新的query对象，这会完全替换掉之前所有的查询参数，所以无法实现"添加"的效果。
• 第二种方法：router.asPath是包含了查询参数的完整路径字符串（比如/category/men-and-women或者/category/men-and-women?sortBy=price），当你把它作为pathname传入时，Next.js会把query参数和asPath里的query部分冲突处理，导致新参数无法正确添加，所以这种方式不可行。

额外补充 #

如果需要修改已有的参数（比如把sortBy改成date），同样用合并的方式：

router.push({
  pathname: router.pathname,
  query: { ...router.query, sortBy: "date" }
})

如果需要删除某个参数，可以用解构赋值剔除掉目标参数：

const { maxPrice, ...restQuery } = router.query;
router.push({
  pathname: router.pathname,
  query: restQuery
})

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