headache trying to understand new route nesting (new to Next 13)
Answered
Kokoni posted this in #help-forum
KokoniOP
So i got this root layout and root page. I would like to have a sub-route in my page instead of my EmployeeTable i would like to have multiple routes.
But if I add a folder for another route, it obviously renders a child below the body tag, (as the children keyword in rootlayout points to). So how would I achieve that?
In other words I would like to keep my nav and bar for some routes but ALSO have the possibility to have a route where i can dispose of them and just render whatever i want. I feel like this is basic lol but I'm having a hard time finding examples. Thank you in advance!
But if I add a folder for another route, it obviously renders a child below the body tag, (as the children keyword in rootlayout points to). So how would I achieve that?
In other words I would like to keep my nav and bar for some routes but ALSO have the possibility to have a route where i can dispose of them and just render whatever i want. I feel like this is basic lol but I'm having a hard time finding examples. Thank you in advance!
Answered by Rafael Almeida
it looks like you want a route group: https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path
- basically your root layout (
- you can create a route group with another layout like
- everything inside this route group will now have this shared layout, you can add the
- if you want to create a new page without this layout, you can create it outside this route group
- basically your root layout (
app/layout.js) will always be applied to all pages- you can create a route group with another layout like
app/(nav-header)/layout.js, the code of this component would be what you have in your page component- everything inside this route group will now have this shared layout, you can add the
/ path with the file app/(nav-header)/page.js- if you want to create a new page without this layout, you can create it outside this route group
3 Replies
it looks like you want a route group: https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path
- basically your root layout (
- you can create a route group with another layout like
- everything inside this route group will now have this shared layout, you can add the
- if you want to create a new page without this layout, you can create it outside this route group
- basically your root layout (
app/layout.js) will always be applied to all pages- you can create a route group with another layout like
app/(nav-header)/layout.js, the code of this component would be what you have in your page component- everything inside this route group will now have this shared layout, you can add the
/ path with the file app/(nav-header)/page.js- if you want to create a new page without this layout, you can create it outside this route group
Answer
@Rafael Almeida it looks like you want a route group: <https://nextjs.org/docs/app/building-your-application/routing/route-groups#organize-routes-without-affecting-the-url-path>
- basically your root layout (`app/layout.js`) will always be applied to all pages
- you can create a route group with another layout like `app/(nav-header)/layout.js`, the code of this component would be what you have in your page component
- everything inside this route group will now have this shared layout, you can add the `/` path with the file `app/(nav-header)/page.js`
- if you want to create a new page without this layout, you can create it outside this route group
KokoniOP
hey rafael! thanky ou very much. I think my main mind block was that I thought root page.js was mandatory... so I couldn't imagine a workaround.
I seem to have achieved what i wanted by setting my directory like this. Is it good?
I seem to have achieved what i wanted by setting my directory like this. Is it good?
yeah, this looks great!