how to set on [id]/page.js component to ignore parents layout.js?
Unanswered
gref9730 posted this in #help-forum
gref9730OP
Hello
I have a project where is
root / layout.js
/page.js
/otherComponent.js
and in this folder I have /[id] folder in which I have
/[id]/page.js
and I would like to set in this page to ignore the parent's layout.js is it possible? I want the layout for all other components and just for this one I need to ignore it... is there a possibility?
I have a project where is
root / layout.js
/page.js
/otherComponent.js
and in this folder I have /[id] folder in which I have
/[id]/page.js
and I would like to set in this page to ignore the parent's layout.js is it possible? I want the layout for all other components and just for this one I need to ignore it... is there a possibility?
22 Replies
Orinoco Crocodile
https://nextjs.org/docs/app/building-your-application/routing/route-groups
Try with
root/(rootlayout)/page.js
root/(rootlayout)/otherComponent.js
root/(rootlayout)/[id]/page.js
Try with
root/(rootlayout)/page.js
root/(rootlayout)/otherComponent.js
root/(rootlayout)/[id]/page.js
gref9730OP
I have in root a RootLayout.js component and I want it inside
these two to be affected by the RootLayout..
root/someNav/page.js
root/someNav/otherComponent.js
but this not
root/someNav/[id]/page.js
these two to be affected by the RootLayout..
root/someNav/page.js
root/someNav/otherComponent.js
but this not
root/someNav/[id]/page.js
gref9730OP
and somehow on page.js say ignore all parents layouts
Orinoco Crocodile
https://youtu.be/gGYmWgEpo3Y Like that?
gref9730OP
yes indeed!
Orinoco Crocodile
Orinoco Crocodile
the same structure folter but with other router group
@gref9730 thats magic
Orinoco Crocodile
Yep, that broke my head when I learn it. 
gref9730OP
wait and do you have directly in app folder layout.js?
or where do you have RootLayout?
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="bg-red-300 w-full min-h-screen">{children}</body>
</html>
)
}
export const metadata = {
title: 'Next.js',
description: 'Generated by Next.js',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="bg-red-300 w-full min-h-screen">{children}</body>
</html>
)
}
or is it in both of them?
Orinoco Crocodile
in that case 1 put one rootlayout in each folder changing only the bg color to see the diff
root/(RouteGroup)/layout.tsx
gref9730OP
oh shiit it works
i fcked up import of globals.css
now it works
thanks a lot!
me really appreacite your help ^^