Nextjs 动态路由被渲染两次

Question

我在 pages/user/[id].jsx 有一条动态路线 我的 [id].jsx 包含 console.log(useRouter().query.id); 如果我去url/user/5 当我检查控制台时，一旦我得到未定义，然后是正确的 id（在这种情况下为 5）。这是怎么回事，有办法解决吗？

Answer 1

您可以为此使用 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}
}