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

Question

我有一個問題，我需要在更新后獲取查詢參數

但在此示例中，當我制作 console.log 時，router.query 被重置為空 object（並且路由已更新）

為什么，我失蹤了？

編輯：當我制作router.push(/foo?page=1)它的工作！

這是一個錯誤嗎？

代碼框鏈接

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 function 來捕獲查詢參數，然后做任何您想做的事情。

另外，我建議使用 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 ，您傳遞查詢 object 的第二個參數用於裝飾路徑的as參數。

如果您想使用URL object 格式來執行與router.push("/foo?page=1")相同的操作，那么您的代碼應如下所示。

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