How to hide some elements inside header for some dynamic [[slug...]] routes?
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
In our application we don't have any static routes, so all routes are dynamic and refers to pages living in a CMS, since we need all pages to have internaitonalized slugs.
On some pages like the checkout and receipt page and others we need to be able to remove some elements like the search field and navigaiton from the header, but since the header but up until now we did not put the header inside the [[...slugs]] app router folder but before that since it was global.
If we need to show/hide differently on some dynamic route / slugs we need to put it inside the [[...slugs]] route segment right? But doesn't that mean the header will rerender every time we switch routes? Can this be avoided and how? Or is there a different approach to this?
On some pages like the checkout and receipt page and others we need to be able to remove some elements like the search field and navigaiton from the header, but since the header but up until now we did not put the header inside the [[...slugs]] app router folder but before that since it was global.
If we need to show/hide differently on some dynamic route / slugs we need to put it inside the [[...slugs]] route segment right? But doesn't that mean the header will rerender every time we switch routes? Can this be avoided and how? Or is there a different approach to this?
3 Replies
Transvaal lionOP
I should add that simply looking at the pathname will not work, since the slugs are coming from a cms, are different per language and might change.
If we need to show/hide differently on some dynamic route / slugs we need to put it inside the [[...slugs]] route segment right? But doesn't that mean the header will rerender every time we switch routes? Can this be avoided and how? Or is there a different approach to this?
Have you tried using route groups?
src/(hasNavbar)/layout.tsx <-- put header here
src/(hasNavbar)/[[...slugs]]
src/(noNavbar)/layout.tsx <-- dont put header here
src/(noNavbar)/checkout
src/(noNavbar)/receiptTransvaal lionOP
The problem is that all routes, also checkout, recept etc are completely dynamic and decided/localized from the cms. We don't have the luxory of any static route segments