sam*_*adi 8 reactjs next.js next.js13
我正在尝试创建一个具有仪表板布局的页面和一个具有默认 Next.js 13 布局的页面。
我在仪表板页面上遇到问题。
当我转到仪表板中的地址时，菜单、项目等的显示是正确的，为了检查错误，我删除了组件，并且只有两个页面和一个链接。
但在浏览器控制台中仍然报错：
警告：您正在安装新的主体组件，而之前的组件尚未先卸载。一次渲染多个主体组件是一种错误，并且这些组件的属性和子组件可能会以不可预测的方式失败。
请仅渲染单个实例，如果您需要安装新实例，请确保首先卸载任何先前的实例。
和：
警告：validateDOMNesting(...)：不能作为 的子项出现
<main>。
小智 15
我有同样的错误，似乎你只能在根布局中包含 HTML 和正文。尽管文档对此并不清楚，但可以在此处找到一些参考资料https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts和此处https://nextjs.org /docs/app/building-your-application/routing/route-groups#opting-specific-segments-into-a-layout
所以如果你的根布局看起来像这样
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
任何其他布局不应包含 HTML 和正文。
组中布局的代码将是这样的 -
export default function DashboardLayout({
children,
}: {
children: React.ReactNode;
}) {
return <section>{children}</section>;
}
另外，如果您有超过 1 个组，您需要记住以下内容 -
如果您创建根布局，然后在其中一个组中创建布局，则所有组中都必须有一个单独的布局。
| 归档时间： |
|
| 查看次数： |
4827 次 |
| 最近记录： |