Next.js中useRouter的正确用法 为何解构router.query返回undefined

核心错误原因 #

• 两种写法的语义完全不同：
  1. 第一种写法const route = router.query是将完整的路由参数对象赋值给route变量，此时route包含全部动态路由参数、URL查询参数，route.id就是读取参数中键为id的值，这个写法本身符合Pages Router下useRouter的使用规范。
  2. 第二种写法用了对象解构语法，const {route} = router.query等价于const route = router.query.route，是读取路由参数中键为route的值，只要你的URL中没有名为route的参数，输出结果必然是undefined。如果你是想解构获取id参数，正确写法为const { id } = router.query。

Next.js useRouter使用补充说明 #

• 如果你使用的是Next.js 13及以上版本的App Router（app目录模式）：从next/navigation导入的useRouter不存在query属性，要获取查询参数需要搭配useSearchParams钩子，动态路由参数则可以通过服务端组件的props.params直接读取。
• 如果你使用的是Pages Router（pages目录模式）：页面首次渲染时路由还未完成hydration，router.query可能是空对象，需要判断router.isReady为true后再读取参数才能保证拿到有效值。

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