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

我认为在这种情况下，最好使用getServerSideProps。您可以像这样使用 getServerSideProps 函数来捕获查询参数，然后执行任何您想要的操作。

此外，我建议使用 Next.js 中的 Link 组件。它比 router.push.

好多了，并且提供了更好的可访问性

import Link from 'next/link';

export const getServerSideProps = async context => {
  const page = context.query.page || 1;
  // Fetch new page or do whatever you want
  const data = await fetch(...);

  return {
    props: {
      page,
      data
    }
  }
}

export default function IndexPage({ page, data }) {
  return (
    <div>
      <Link href={{ pathname: '/foo', query: { page: '1' } }}>
        <a>
          <button>Change route</button>
        </a>
      </Link>
    </div>
  );
}

Answer 2

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

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

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

router.query 在 next/router router.push 之后未更新

router.query not updated after router.push in next/router

reactjs

next.js

next-router