Next.js useSearchParams/useRouter重置过滤器后URL参数未消失问题

问题分析 #

你在自定义hook中通过URLSearchParams删除amenities等参数后，日志确认参数已被移除，但URL中仍保留amenities参数。核心原因是手动拼接URL字符串传递给router.replace时，存在Next.js路由处理的潜在兼容问题，手动拼接的方式不如官方推荐的UrlObject格式可靠。

解决方案 #

修改router.replace的调用方式，使用Next.js官方推荐的UrlObject格式传递路径和查询参数，避免手动拼接字符串：

const handleResetFilter = () => {
  const params = new URLSearchParams(searchParams.toString());
  params.delete('minPrice');
  params.delete('maxPrice');
  params.delete('propertyType');
  params.delete('amenities');

  // 改用UrlObject格式传递参数
  router.replace({
    pathname,
    searchParams: params,
  });
  // onClose();
};

额外排查步骤 #

如果问题仍存在，可以添加日志确认参数删除后的字符串结果，确保删除操作生效：

console.log('最终参数字符串:', params.toString());

如果输出字符串中没有amenities，说明参数删除逻辑正确，问题完全出在路由传递方式上；如果仍有amenities，则需要检查URL中是否存在重复参数条目，此时可以循环删除所有匹配项：

// 处理可能存在的重复参数
while (params.has('amenities')) {
  params.delete('amenities');
}

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