next/router与next/navigation的区别及同名useRouter()钩子差异原因

• 对应不同的路由体系
  next/router是Next.js传统Pages Router（基于pages目录的路由系统）的核心API包，而next/navigation是Next.js 13+推出的App Router（基于app目录的新路由系统）的API包。两个钩子分别服务于完全独立的路由实现，是不同路由体系的配套工具。

• 降低迁移学习成本
  为了让熟悉Pages Router的开发者更平滑地过渡到App Router，Next.js团队选择沿用useRouter这个已经被广泛接受的钩子名称。开发者不需要重新记忆全新的钩子命名，只需要调整导入路径，再适配新钩子返回对象的差异即可，大幅降低了迁移的学习曲线。

• 功能定位的延续性
  两个useRouter()的核心职责是一致的：都用于在组件中获取路由状态、执行路由跳转等核心路由操作。虽然底层实现和返回对象的具体方法（比如参数获取、路由刷新逻辑）有差异，但核心功能定位相同，用同名钩子能直观体现这种功能上的延续性。

• 通过导入路径区分边界
  同名但不同的导入路径，能清晰区分开发者当前使用的是Pages Router还是App Router的API，避免不同路由体系的API混用导致的问题。比如：

  • Pages Router中使用：import { useRouter } from 'next/router'
  • App Router中使用：import { useRouter } from 'next/navigation'

需要注意的是，两个钩子返回的对象确实有明显差异：

• Pages Router的useRouter返回对象包含query、push、replace、back等方法，还能直接获取当前路由的查询参数；
• App Router的useRouter返回对象则提供push、replace、refresh、back等方法，查询参数需要通过单独的useParams()或useSearchParams()钩子获取。

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