Nextjs动态路由渲染两次

Question

我在pages/user/[id].jsx中有一个动态路由我的[id].jsx包含console.log(useRouter().query.id);如果我转到url/user/5当我检查控制台时，我得到了未定义的id，然后得到了正确的id(在这种情况下是5(。这里发生了什么，有办法解决吗？

Answer 1

我不知道你页面的内容，但如果你没有getStaticProps或getServerSideProps(或旧的getInitialProps(，那么NextJS会将你的页面作为静态页面处理，并进行自动静态优化(https://nextjs.org/docs/advanced-features/automatic-static-optimization#how-它起作用(

在那里你可以读到：

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

要克服双重渲染，可以执行以下操作：

// pages/user/[id].jsx
import { useRouter } from 'next/router';
const UserPage = () => {
const { query, isReady } = useRouter()
// wait until there is a query with the data; or `!query.id`
if (!isReady) {
return null;
}
return query.id;
}
export default UserPage;

或者如果你有一些用处效果：

// pages/user/[id].jsx
import { useEffect } from 'react';
import { useRouter } from 'next/router';
const UserPage = () => {
const { query, isReady } = useRouter()

useEffect(() => {
if (isReady) {
// fetch(`your.domain/user/${query.id}`)...;
}
}, [isReady])
if (!isReady) {
return null;
}
return query.id;
}
export default UserPage;

Answer 2

您可以为此使用getInitialProps。

// sample usage
// file /pages/user/[id].jsx
export default function User({id}){ 
return <div>{id}</div>
}

User.getInitialProps = (appContext) => {
return {id: appContext.query.id}
}