Override Root Layout via Route Group Layout
Unanswered
Lorenz posted this in #help-forum
LorenzOP
Hey! I want to override the root layout on certain pages. Most of my pages use the same header and footer which is defined in my
I decided to change the
RootLayout (app/layout.tsx), but a few pages like app/dashboard/page.tsx require a different layout. I tried creating app/dashboard/layout.tsx which worked just fine, but then i started to get this error:NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.I decided to change the
app/dashboard/layout.tsx to a fragment export <> </> without html and body tags. This worked fine and fixed the error, but the Root layout header and footer remain.16 Replies
You might want to take a look at [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
@Clown You might want to take a look at [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)
LorenzOP
yeah i did go through that, but i can't seem to find a workaround, it just explains my problem and doesn't give a solution
the root layout wraps up other nested layouts into it, ultimately the root layout is shown even in route groups
which i want to avoid, i just want it to inherit the route layout and not the root layout in certain route groups
Route groups themselves are the solution.
You create two Route Groups and you can two root layouts that way. One in each route group
You create two Route Groups and you can two root layouts that way. One in each route group
LorenzOP
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.ah i still get this
my file structure
a much cleaner one
LorenzOP
okay i fixed it
nextjs doesn't allow multiple root layouts if there's a root layout under
app/so i moved my root pages and layout into a route group
(root)thanks for helping :)