Next.js如何在渲染前初始化路由？解决router.query刷新为undefined问题

• Next.js 客户端首次渲染（尤其是页面刷新场景）时，useRouter 返回的 router.query 还未完成初始化，此时解构得到的 id 为 undefined
• 从其他组件跳转属于客户端路由导航，路由参数会在跳转前完成解析，所以可以正常拿到 id
• react-query 默认会在组件挂载时立即触发查询，不会等待路由参数就绪，因此会携带 undefined 发起请求

方案1：使用 react-query 的 enabled 配置项（通用方案，兼容Pages Router/App Router） #

通过 enabled 开关控制请求的触发时机，只有 id 存在时才发起请求，同时建议将 id 加入查询键，保证不同id的请求缓存相互隔离：

const router = useRouter()
const { id } = router.query

const { data } = useQuery(
  ['subjects', id], 
  async () => await getSubject(id),
  {
    enabled: !!id, // id为假值时不会触发查询
  }
)

方案2：Pages Router 场景下使用 getServerSideProps 预取参数 #

在服务端渲染阶段直接获取路由参数，传入组件props，避免客户端等待路由初始化：

// 页面层定义getServerSideProps
export async function getServerSideProps(context) {
  const { id } = context.query
  return {
    props: { id }
  }
}

// 组件内直接使用props传入的id
function SubjectPage({ id }) {
  const { data } = useQuery(['subjects', id], async () => await getSubject(id))
  // 业务逻辑
}

方案3：App Router 场景下直接使用页面组件自带的 params #

App Router 的动态路由页面会默认接收包含路由参数的 params 属性，无需依赖 useRouter 即可直接拿到参数：

// app/subject/[id]/page.js 组件
export default function SubjectPage({ params }) {
  const { id } = params
  const { data } = useQuery(['subjects', id], async () => await getSubject(id))
  // 业务逻辑
}

内容的提问来源于stack exchange，提问作者Ahmed Ibrahim