Next.js路由器.查询在刷新页面时未定义，但如果您从Link组件导航到它，则可以正常工作

Question

为什么是路由器?当我在URL中使用正确的id刷新页面时，查询为空，但是当我导航到它时，它可以工作吗?

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

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

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

在/页面/[用户]/媒体/[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从路由器。查询为空

Answer 1

正如@Ishan Bassi所提到的，在next/router中使用isReady字段将表明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将触发应用程序的更新，在查询对象中提供路由参数。

自动静态优化