Next.js 14 App Router输入框与查询参数实时同步问题

问题原因 #

你当前的实现把输入框的value直接绑定到searchParams.get('name')，而每次触发onChange时调用router.push更新路由参数的操作是异步的。组件需要等待路由更新完成后，才能从新的searchParams中获取值并更新输入框，这就导致了输入值的更新滞后于查询参数的变化。

解决方案 #

改用本地状态维护输入框的值，同时同步更新路由查询参数，这样既能保证输入框实时响应输入，又能同步更新地址栏的查询参数：

'use client';

import { useState, useEffect } from 'react';
import { useSearchParams, usePathname, useRouter } from 'next/navigation';

export default function UserSearchInput() {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();

  // 用本地state存储输入值，初始值从路由参数读取
  const [name, setName] = useState(searchParams.get('name') || '');

  // 监听路由参数变化，同步到本地state（比如用户手动修改地址栏时）
  useEffect(() => {
    setName(searchParams.get('name') || '');
  }, [searchParams]);

  const handleFilter = (e) => {
    const inputValue = e.target.value;
    // 先更新本地state，让输入框实时显示输入内容
    setName(inputValue);

    const updatedParams = new URLSearchParams(searchParams);
    // 输入为空时删除参数，避免地址栏出现空值参数
    if (inputValue) {
      updatedParams.set('name', inputValue);
    } else {
      updatedParams.delete('name');
    }
    updatedParams.set('page', 1);

    // 更新路由参数
    router.push(`${pathname}?${updatedParams.toString()}`);
  };

  return (
    <input
      type="text"
      className="form-control"
      placeholder="Name of the user"
      id="name"
      name="name"
      value={name}
      onChange={handleFilter}
    />
  );
}

关于Shallow Routing的说明 #

Next.js 14 App Router的useRouter中确实移除了shallow选项，这是因为App Router的路由机制和旧的Pages Router不同。在App Router中，同页面的路由参数更新默认不会触发服务器组件的重新渲染（仅客户端组件会重新渲染），所以不需要依赖shallow routing来优化。上述方案通过本地状态优先更新输入框，已经解决了同步延迟的问题，无需额外配置shallow。

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