Next.js多次router.push参数丢失，求基于历史URI更新的替代方案

在React + Next.js项目中，使用useRouter的router.push在同一事件里多次更新URI查询参数时，会因为每次更新都基于初始的router.query（而非前一次更新后的最新状态），导致部分更新被覆盖丢失。

复现示例 #

import { useEffect } from 'react';
import { useRouter } from 'next/router';

export default function IndexPage() {
  const router = useRouter();
  useEffect(() => {
    router.push({
      pathname: router.pathname,
      query: { ...router.query, x: 'foo' },
    });
    router.push({
      pathname: router.pathname,
      query: { ...router.query, y: 'bar' },
    });
    router.push({
      pathname: router.pathname,
      query: { ...router.query, z: 'baz' },
    });
  }, [router.pathname, router.query.x, router.query.y, router.query.z]);
  return (
    <ul>
      {Object.entries(router.query).map(([key, value]) => (
        <li key={key}>
          {key}: {value}
        </li>
      ))}
    </ul>
  );
}

问题现象 #

实际渲染结果仅保留了两个参数：

• x: foo
• z: baz

而预期应该是三个参数都存在：

• x: foo
• y: bar
• z: baz

我们期望router.push能像useState那样支持更新器函数（如下伪代码），但目前需要用其他方案替代：

router.push((prevUrl) => ({
  pathname: prevUrl.pathname,
  query: { ...prevUrl.query, x: 'foo' },
}));
router.push((prevUrl) => ({
  pathname: prevUrl.pathname,
  query: { ...prevUrl.query, y: 'bar' },
}));
router.push((prevUrl) => ({
  pathname: prevUrl.pathname,
  query: { ...prevUrl.query, z: 'baz' },
}));

解决方案 #

1. 合并所有更新到单次push

如果能一次性确定所有需要更新的参数，直接合并成一个对象后调用一次router.push，从根源避免覆盖问题：

useEffect(() => {
  router.push({
    pathname: router.pathname,
    query: { ...router.query, x: 'foo', y: 'bar', z: 'baz' },
  });
}, [router.pathname]);

2. 利用push的异步特性链式调用

router.push返回Promise，通过async/await或.then()让每次更新都等待前一次完成，确保后续更新基于最新的router.query：

useEffect(() => {
  const updateParams = async () => {
    await router.push({
      pathname: router.pathname,
      query: { ...router.query, x: 'foo' },
    });
    await router.push({
      pathname: router.pathname,
      query: { ...router.query, y: 'bar' },
    });
    await router.push({
      pathname: router.pathname,
      query: { ...router.query, z: 'baz' },
    });
  };
  updateParams();
}, [router.pathname]);

3. 手动维护临时查询对象

如果更新逻辑需要分步处理，可以先在内存中构建完整的查询对象，最后再执行一次push：

useEffect(() => {
  const tempQuery = { ...router.query };
  tempQuery.x = 'foo';
  tempQuery.y = 'bar';
  tempQuery.z = 'baz';

  router.push({
    pathname: router.pathname,
    query: tempQuery,
  });
}, [router.pathname]);

问题原因 #

router.push是异步操作，router.query的更新不会同步生效。在同一事件循环内多次调用push时，每次读取的router.query都是初始值，后续的push会覆盖前面的更新，导致中间的参数丢失。

内容的提问来源于stack exchange，提问作者Géry Ogam