Next.js 13 App Router中useRouter动态增删查询参数咨询

在Next.js 13的App Router模式下，next/navigation中的useRouter和Pages Router版本存在差异，无法直接读取或修改query对象，需要结合useSearchParams钩子来处理查询参数。以下是具体实现方法：

核心步骤说明 #

1. 必须在客户端组件中使用：useRouter和useSearchParams都是客户端钩子，需在组件顶部添加'use client'指令。
2. 获取当前查询参数：通过useSearchParams获取只读的URLSearchParams对象，用于读取现有参数。
3. 操作查询参数：创建新的URLSearchParams实例复制现有参数，再通过set/append/delete方法修改，最后用router.replace更新路由。

代码示例（匹配你的需求） #

假设当前路由是/hotels?id=123&type=hotel，要添加/移除filters=219,213参数：

'use client';

import { useRouter, useSearchParams } from 'next/navigation';

export default function HotelsPage() {
  const router = useRouter();
  const searchParams = useSearchParams();

  // 添加filters参数
  const addFilters = () => {
    // 复制现有参数，避免修改只读对象
    const newParams = new URLSearchParams(searchParams);
    // 设置新参数（若需添加多个同key值，用append替代set）
    newParams.set('filters', '219,213');
    // 更新路由，保留原路径，仅修改查询参数
    router.replace(`/hotels?${newParams.toString()}`, { scroll: false });
  };

  // 移除filters参数
  const removeFilters = () => {
    const newParams = new URLSearchParams(searchParams);
    newParams.delete('filters');
    router.replace(`/hotels?${newParams.toString()}`, { scroll: false });
  };

  return (
    <div>
      <button onClick={addFilters}>添加筛选参数</button>
      <button onClick={removeFilters}>移除筛选参数</button>
    </div>
  );
}

常见问题解决 #

你之前用router.replace未成功，大概率是以下原因：

• 没有复制现有查询参数，直接覆盖了所有参数（比如直接写router.replace('/hotels?filters=219,213')会丢失id和type）。
• 直接修改了useSearchParams返回的只读对象，导致操作无效。

额外说明 #

• 若要添加多个相同键的参数（如filters=219&filters=213），使用newParams.append('filters', '219')和newParams.append('filters', '213')。
• router.replace的第二个参数可以设置scroll: false，避免路由更新后页面滚动到顶部，提升用户体验。

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