Issue with next/link
Unanswered
West African Lion posted this in #help-forum
West African LionOP
Hi, i get this error :
Only after i change page with link. If i reload this error is gone.
Here an example of code :
My "/" root layout :
My documents route layout :
I get the error and the theme is not working and need a page reload to work correctly. With a page reload the error disappear
Warning: validateDOMNesting(...): <html> cannot appear as a child of <body>.
html
Only after i change page with link. If i reload this error is gone.
Here an example of code :
My "/" root layout :
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark">
<ModelProvider>{children}</ModelProvider>
<Toaster richColors expand={true} />
</ThemeProvider>
</body>
</html>
);
}My documents route layout :
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}I get the error and the theme is not working and need a page reload to work correctly. With a page reload the error disappear
3 Replies
@West African Lion Hi, i get this error :
> Warning: validateDOMNesting(...): <html> cannot appear as a child of <body>.
> html
Only after i change page with link. If i reload this error is gone.
Here an example of code :
My "/" root layout :
ts
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>
<ThemeProvider attribute="class" defaultTheme="dark">
<ModelProvider>{children}</ModelProvider>
<Toaster richColors expand={true} />
</ThemeProvider>
</body>
</html>
);
}
My documents route layout :
ts
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
I get the error and the theme is not working and need a page reload to work correctly. With a page reload the error disappear
if your
/ root layout is a parent of the documents route layout, that is disallowed since you cannot have something like<html>
<body>
<html>
<body>
...
</body>
</html>
</body>
</html>so either make the
/ root layout not wrap the documents root layout (check the route group documentation), or remove the usage of html and body in the child layoutWest African LionOP
Thx, I will surely try