解决Next.js App Router报错: invariant expected app router to be mounted

可能的原因与解决方案 #

1. 确保组件仅在App Router环境中使用 #

这个错误核心是App Router专属的钩子（useRouter/useSearchParams）在没有路由上下文的环境中被调用。检查以下内容：

• 确认Search组件仅在app/目录下的页面或布局中使用，禁止在pages/目录（Pages Router）的文件里导入该组件。
• 若项目同时混用Pages Router和App Router，该组件只能在App Router的路由树内渲染。

2. 验证'use client'指令的正确性 #

确保'use client'是文件的第一行代码，不能有任何注释、导入或空行在它之前。你的代码目前符合要求，但可排查编辑器是否自动添加了隐藏字符或开头注释。

3. 检查createUrl工具函数的实现 #

报错可能源于createUrl函数的逻辑引发路由上下文异常。比如函数依赖Server端专属API、URL拼接逻辑有问题等。建议临时替换为原生URL拼接逻辑测试：

// 替换原router.push逻辑
router.push(`/search?${newParams.toString()}`);

若替换后错误消失，说明createUrl需要调整为兼容Client Component的实现。

4. 优化路由钩子的使用逻辑 #

调整useEffect的依赖和逻辑，避免路由上下文未就绪时的异常：

useEffect(() => {
  if (searchParams) {
    setSearchValue(searchParams.get('q') ?? '');
  }
}, [searchParams]);
// 移除setSearchValue的依赖——它是useState的setter，无需加入依赖数组

5. 升级Next.js到稳定版本 #

App Router在Next.js 13.4版本才正式稳定，若使用13.0-13.3的预览版，可能存在路由上下文bug。执行命令升级：

npm install next@latest
# 或
yarn add next@latest

6. 检查父组件的渲染上下文 #

若父组件是Server Component，禁止在静态渲染时强制同步渲染该Client Component（比如使用ReactDOMServer.renderToString等方法），这类操作会破坏Client Component的路由上下文。

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