在 Next.js App Router 中，客户端组件需使用 next/navigation 而非 next/router 导入 useRouter，否则会触发 “NextRouter was not mounted” 错误；同时必须确保组件明确标记为 Client Component（即含 'use client' 指令）。
在 next.js app router 中，客户端组件需使用 `next/navigation` 而非 `next/router` 导入 `userouter`，否则会触发 “nextrouter was not mounted” 错误；同时必须确保组件明确标记为 client component（即含 `'use client'` 指令）。
Next.js 13+ 的 App Router 与旧版 Pages Router 在路由 API 设计上存在根本差异：next/router（基于 Router 实例的旧 API）仅适用于 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<Record<string, string>>({});
// 方案一：使用 useSearchParams（推荐，无需依赖路由就绪状态）
useEffect(() => {
const data = Object.fromEntries(searchParams.entries());
setNft(data);
}, [searchParams]);
// 方案二：若需监听路由变化或执行导航，可结合 useRouter.push()
// router.push('/nft-details?tokenId=123');
return (
<div>
<h2>NFT Details</h2>
<pre>{JSON.stringify(nft, null, 2)}</pre>
</div>
);
}? Link 传参写法（App Router 兼容）
确保你在搜索页中使用 Link 的 href 以标准 URL 字符串或对象形式传递 query：
import { Link } from '@/navigation'; // 或直接使用 next/link
<Link href={`/nft-details?${new URLSearchParams(el).toString()}`}>
View NFT
</Link>
// 或更简洁地（Next.js 自动序列化）：
<Link href={{ pathname: '/nft-details', query: el }}>
View NFT
</Link>⚠️ 注意：el 应为 plain object（如 { tokenId: '7', name: 'CryptoKitty' }），不可为 undefined 或嵌套对象（需提前扁平化）。
? 补充说明
- useRouter() 在 App Router 中不提供 router.query 或 router.isReady —— 因为服务端已预解析 URL，客户端始终“就绪”；
- 若需获取动态路由参数（如 /nft-details/[id]/page.tsx），应使用 useParams()；
- 若需响应式监听 query 变化，useSearchParams() 是唯一推荐方式，它返回一个 URLSearchParams 实例，支持 .get()、.getAll() 等方法；
- 所有使用 useState、useEffect、事件处理器的组件，必须顶部声明 'use client' —— 这是强制要求，不可省略。
遵循以上规范，即可彻底解决 NextRouter was not mounted 报错，并安全、高效地在 App Router 中传递和消费查询参数。
