在Next.js App Router中正确使用useRouter的导入方式

先给结论：如果你在 Next.js App Router 项目中遭遇“NextRouter was not mounted”报错，绝大多数情况下是导入路径使用不当所致。正确的解决方式是使用 next/navigation 而非 next/router 来导入 useRouter，同时务必在组件顶部显式添加 'use client' 指令。虽然问题本身看似简单，但其背后反映了 App Router 与 Pages Router 在路由架构设计上的本质区别。

Next.js 13+ 引入的 App Router 与传统的 Pages Router 在路由 API 层面完全是两套不同体系：next/router 基于旧版 Router 实例，仅适用于 Pages Router；而在 App Router 环境下，所有路由能力均由 next/navigation 统一提供，涵盖 useRouter、useSearchParams、redirect 和 notFound 等核心接口。

因此，你代码中报错的根本原因非常清晰：

• ❌ 错误写法：import { useRouter } from 'next/router' —— 该写法在 App Router 中无效，导致路由无法正常挂载；
• ✅ 正确写法：import { useRouter } from 'next/navigation' —— 这是 App Router 官方推荐的客户端路由 Hook 导入方式。

除此之外，还有几个关键要点值得特别留意：

✅ 正确用法示例（适配 App Router）

'use client';import { useRouter, useSearchParams } from 'next/navigation';import { useEffect, useState } from 'react';export default function NFTDetails() {  const router = useRouter();  const searchParams = useSearchParams(); // 推荐用于读取 query 参数  const [nft, setNft] = useState>({});  // 方案一：使用 useSearchParams（推荐，无需依赖路由就绪状态）  useEffect(() => {    const data = Object.fromEntries(searchParams.entries());    setNft(data);  }, [searchParams]);  // 方案二：若需监听路由变化或执行导航，可结合 useRouter.push()  // router.push('/nft-details?tokenId=123');  return (    
      
NFT Details
      
{JSON.stringify(nft, null, 2)}
    
  );}