Next.js App Router：router.push不生效及route.query修改方法求助

1. 为何在Next.js App Router中使用router.push({pathname: 'somewhere', query: {id: 1234}})无法生效？ #

这是因为App Router的useRouter（仅客户端组件可用）的push方法不再支持query字段——这个写法是Pages Router专属的。App Router要求通过search参数传递查询参数，或者直接构造完整的URL字符串。

两种可行的解决方式：

• 直接构造URL字符串：

'use client';
import { useRouter } from 'next/navigation';

export default function Example() {
  const router = useRouter();

  const handleNavigate = () => {
    router.push('/somewhere?id=1234');
  };

  return <button onClick={handleNavigate}>跳转到带id的页面</button>;
}

• 用URLSearchParams构建查询参数：

'use client';
import { useRouter } from 'next/navigation';

export default function Example() {
  const router = useRouter();

  const handleNavigate = () => {
    const params = new URLSearchParams();
    params.set('id', '1234');
    router.push({
      pathname: '/somewhere',
      search: params.toString(),
    });
  };

  return <button onClick={handleNavigate}>跳转到带id的页面</button>;
}

2. App Router中如何修改查询参数（解决searchParams只读问题） #

useSearchParams返回的是只读的URLSearchParams实例，这是App Router的设计要求——不能直接修改参数实例，必须通过导航操作来更新URL。

解决思路是：基于当前参数创建一个新的可修改副本，调整参数后用router.push跳转更新URL：

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

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

  const updateSearch = (newSearchValue: string) => {
    // 复制当前查询参数，避免修改原只读实例
    const newParams = new URLSearchParams(searchParams);
    if (newSearchValue) {
      newParams.set('search', newSearchValue);
    } else {
      newParams.delete('search'); // 清空搜索参数
    }
    // 跳转更新URL，保留其他现有参数
    router.push({
      pathname: '/dashboard',
      search: newParams.toString(),
    });
  };

  return (
    <>
      <p>当前搜索：{searchParams.get('search') || '无'}</p>
      <input
        type="text"
        placeholder="输入搜索内容"
        onChange={(e) => updateSearch(e.target.value)}
        defaultValue={searchParams.get('search')}
      />
    </>
  );
}

这段代码会保留URL中其他查询参数，仅更新search字段；如果需要替换所有参数，直接创建空的URLSearchParams实例再设置新参数即可。

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