logo标签列表

Next.js 抛出错误: Error: 在 pages 文件夹中使用 _document.js 时，NextRouter 尚未挂载。

javascriptreactjsnext.js
4

我想根据当前的语言环境来自定义HTML。我在pages目录下创建了一个_document.js文件，并使用了以下代码：

import { Html, Head, Main, NextScript } from 'next/document'
import { useRouter } from 'next/router'

export default function Document() {
  
  const { locale } = useRouter();

  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

但我遇到了这个错误：

错误：Error: NextRouter未安装。https://nextjs.org/docs/messages/next-router-not-mounted

当我转到指定的URL时，我看到他们说我在<Main />之外使用了逻辑。那么，我如何在_document.js中访问locale？

我找到了Next.JS的NextRouter未安装，但即使我使用next/navigation也无法解决问题，并且出现了以下错误：

错误：不变式期望应用程序路由器已安装

2个回答
8

我在app文件夹的客户端组件中遇到了这个问题。

应该是这样的：

import { useRouter } from 'next/router'

导入自

import { useRouter } from "next/navigation";
3

useRouter() 钩子在浏览器上运行，而 _document.js 在服务器上运行；这就是问题所在。例如，在 return 之前在 Document 中添加 console.log('Hello Word')，它只会在开发服务器中打印，而不会在浏览器中打印。

你不应该尝试在 _document.js 中使用与钩子相关的逻辑，因为它并不是为此而设计的，正如文档所说：

位于 <Main /> 之外的 React 组件将不会被浏览器初始化。不要在此处添加应用程序逻辑或自定义 CSS（如 styled-jsx）。如果您需要在所有页面中共享组件（如菜单或工具栏），请阅读 Layouts。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接