Next.js useRouter报错‘NextRouter was not mounted’的解决求助

针对App Router（Next.js 13+） #

你之前用的next/router是Pages Router专属API，在App Router环境下会触发该错误，正确做法是使用next/navigation提供的路由工具：

客户端组件获取slug #

如果组件需要客户端交互，添加'use client'指令后用useParams获取路由参数：

'use client';
import { useParams } from 'next/navigation';

export default function PostPage() {
  const params = useParams();
  return <p>Post: {params.slug}</p>;
}

注意：路由结构要匹配动态路由规则，比如页面文件路径需设为app/post/[slug]/page.js，[slug]会被自动解析为路由参数。

服务器组件获取slug #

如果不需要客户端交互，直接在服务器组件中通过props接收params，无需'use client'：

// app/post/[slug]/page.js
export default function PostPage({ params }) {
  return <p>Post: {params.slug}</p>;
}

针对Pages Router（旧版本Next.js） #

如果项目使用Pages Router（页面放在pages目录下），可以继续用useRouter，但需处理初始加载时参数为空的情况：

'use client';
import { useRouter } from 'next/router';

export default function PostPage() {
  const router = useRouter();
  const { slug } = router.query;

  // 初始加载时router.query可能为空，添加加载状态
  if (!slug) {
    return <p>Loading...</p>;
  }

  return <p>Post: {slug}</p>;
}

页面路径需对应pages/post/[slug].js。

关于next-router-mock #

这个工具仅用于测试时模拟路由环境，不是解决当前运行时错误的方案，无需使用。

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