Next.js设置查询参数：为何推荐复杂写法而非直接router.replace？

你提到的两种修改URL查询参数的写法都能运行，但前者被广泛推荐，核心原因在于它解决了后者的诸多潜在问题：

1. 保留已有查询参数 #

第一种写法基于当前页面已有的searchParams来修改，不会丢失其他已存在的参数。比如当前URL是/products?page=2&sort=desc，当你调用handleFilter('category', 'electronics')时：

• 用URLSearchParams的写法，最终URL会是/products?page=2&sort=desc&category=electronics，保留了page和sort参数
• 而手动拼接的写法，会直接生成/products?category=electronics，原来的page和sort参数直接丢失

2. 自动处理URL编码 #

URL对特殊字符（比如&、=、空格、中文等）有严格的编码要求，URLSearchParams会自动帮你完成编码工作：
比如要设置value为"手机&电脑"，第一种写法会自动转成%E6%89%8B%E6%9C%BA%26%E7%94%B5%E8%84%91，符合URL规范；
而手动拼接会直接生成?title=手机&电脑，此时电脑会被解析成一个独立的无值参数，导致逻辑错误。

3. 更灵活的参数操作 #

URLSearchParams提供了set、delete、append等方法，能轻松处理复杂的参数场景：

• 要删除某个参数：params.delete('page')
• 要给同一个key添加多个值：params.append('tag', 'sale')、params.append('tag', 'new')，最终生成?tag=sale&tag=new
  这些逻辑如果手动拼接，很容易写出冗余且易出错的代码。

4. 避免手动拼接的低级错误 #

手动拼接URL参数时，很容易出现格式错误：

• 忘记在多个参数间加&
• 参数值为空时生成无效的?title=
• 不小心写错参数名的拼写
  而URLSearchParams会自动处理这些细节，保证生成的URL格式始终合法。

两种写法对比代码 #

推荐写法：

const searchParams = useSearchParams();
const pathname = usePathname();
const router = useRouter();

function handleFilter(title, value) {
  const params = new URLSearchParams(searchParams.toString());
  params.set(title, value);
  router.replace(`${pathname}?${params}`, { scroll: false });
}

手动拼接写法：

const router = useRouter();
const pathname = usePathname();

function handleFilter(title, value) {
 router.replace(`${pathname}?${title}=${value}`, { scroll: false });
}

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