Different headers on different url paths—are Parallel Routes the tool for the job?
Answered
Tonkinese posted this in #help-forum
TonkineseOP
Solution: ROUTE GROUPS
I have a relatively simple need to display different headers on different parts of my site.
Ideally, the header would be rendered in a separate area of the main Layout.tsx file, and each Page component would not have to specify which header to render (it would be inferred from the url).
It seems like Parallel Routes are the closest fit for this, but they are not easy to understand. Is there a better option, or am I condemned to figure them out?
I have a relatively simple need to display different headers on different parts of my site.
Ideally, the header would be rendered in a separate area of the main Layout.tsx file, and each Page component would not have to specify which header to render (it would be inferred from the url).
It seems like Parallel Routes are the closest fit for this, but they are not easy to understand. Is there a better option, or am I condemned to figure them out?
Answered by joulev
app/.../
(layout1)/
layout.tsx <- header in position 1
... pages with the header in position 1
(layout2)/
layout.tsx <- header in position 2
... pages with the header in position 23 Replies
@Tonkinese **Solution: ROUTE GROUPS**
I have a relatively simple need to display different headers on different parts of my site.
Ideally, the header would be rendered in a separate area of the main Layout.tsx file, and each Page component would not have to specify which header to render (it would be inferred from the url).
It seems like Parallel Routes are the closest fit for this, but they are not easy to understand. Is there a better option, or am I condemned to figure them out?
app/.../
(layout1)/
layout.tsx <- header in position 1
... pages with the header in position 1
(layout2)/
layout.tsx <- header in position 2
... pages with the header in position 2Answer
TonkineseOP
amazing, thank you @joulev
"Route Groups" for anyone else wondering! https://nextjs.org/docs/app/api-reference/file-conventions/route-groups