Next.js router.query 在刷新页面时未定义，但如果您从 Link 组件导航到它，则可以工作

Question

为什么当我使用 URL 中的正确 id 刷新页面时，router.query 为空，但当我通过 导航到该页面时，它却有效？

说我有/pages/[user]/index.js

<Link
  href="/[user]/media/[mediaId]"
  as={`/${username}/media/${post.id}`}
>

这个链接带我去localhost:3000/testuser/media/some-id

然后在/pages/[user]/media/[mediaId].js中

const MediaPage = () => {
  const [post, setPost] = useState([]);
  const router = useRouter();
  const { mediaId } = router.query;


  useEffect(() => {
    router.prefetch("/");
  }, []);

  useEffect(() => {
    if (!mediaId) return null;
    getPostImage();

    async function getPostImage() {
      try {
        const { data } = await API.graphql({
          query: postById,
          variables: {
            id: mediaId,
          },
        });
        setPost(data.postById.items[0]);
      } catch (err) {
        console.log("error getPostImage", err);
      }
    }
  }, [mediaId]);

  if (user === null) return null;

  return (
    <div>
      <Modal
        className={`${styles.postModal}`}
        isOpen={true}
        onRequestClose={() => router.push(`/${user.username}`)}
        contentLabel="Post modal"
      >
        {* // content ... *}
      </Modal>
    </div>
  );
};

export default MediaPage;

当我在媒体页面 或 上localhost:3000/testuser/media/some-id并按刷新时，mediaId来自 router.query 为空。

Answer 1

正如 @Ishan Bassi 所提到的，使用isReady中的字段next/router将指示query水合后何时完全更新。因此，尝试这样的事情：

const MediaPage = () => {
  const router = useRouter();

    useEffect(() => {
        if(router.isReady){
            const { media } = router.query;
            if (!mediaId) return null;
            getPostImage();
            ...
         }
    }, [router.isReady]);
   
    ...

}

Answer 2

正如Next.js文档所说：

在预渲染期间，路由器的查询对象将为空，因为我们在此阶段没有要提供的查询信息。水合后，Next.js 将触发应用程序更新，以在查询对象中提供路由参数。

自动静态优化