router.query 在 next/router 中的 router.push 后未更新

Question

我有一个问题，我需要在更新后获取查询参数。

在此示例中，当我将console.log重置router.query为空对象时（并且路线已更新）。

为什么？我缺少什么？

当我让它发挥router.push(/foo?page=1)作用时！

这是一个错误吗？

代码沙盒链接

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

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

  useEffect(() => {
    console.log("router.query change", router.query);
  }, [router.query]);

  const changeRoute = () => {
    router.push("/foo", { query: { page: "1" } });
  };

  return (
    <div>
      <button onClick={changeRoute}> change route</button>
    </div>
  );
}

Answer 1

您没有router.push正确使用，传递查询对象的第二个参数是用于as装饰路径的参数。

如果您想使用URL 对象格式执行与 相同的操作router.push("/foo?page=1")，那么您的代码应如下所示。

router.push({
    pathname: "/foo",
    query: { page: "1" }
});