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

在 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 (
    <p>
      <h2>NFT Details</h2>
      <pre>{JSON.stringify(nft, null, 2)}</pre>
    </p>
  );
}

? 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 中传递和消费查询参数。