Next.js Discord

Discord Forum

How to hide and show a specific component from the RootLayout

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Northeast Congo LionOP
I am currently defining the layout for the "/" route in RootLayout.tsx and the layout for the "/showcase" route in the /showcase/layout.tsx file in my project. When accessing the "/" route, the <Footer /> component should be displayed, but I don't want the <Footer /> component to appear when accessing the showcase route.

I've researched route groups and nested layouts, but I couldn't find a solution that fits what I'm trying to achieve. How can I implement this so that certain UI elements are present in the root route but excluded in the subdirectory routes?
Answered by Asian black bear
You define the root layout to have all common elements to all pages and a dedicated route group for pages that should have the footer and one that don't
View full answer

10 Replies

Asian black bear
Route groups are literally what you want.
Asian black bear
You define the root layout to have all common elements to all pages and a dedicated route group for pages that should have the footer and one that don't
Answer
Northeast Congo LionOP
I've tried the followings, but it doesn't work.. what am I doing wrong?

1. remove <Footer /> from the RootLayout.tsx
2. add a route group name (home) for the "/" route's layout, created layout.tsx file containing <Footer /> component.

But the <Footer /> component just disappeared from all the routes..
Asian black bear
Because /app/(home) doesn't match any path
You should have a /app/(home)/page.tsx for the root page that should have the footer
And then for example /app/(other)/showcase/page.tsx for the showcase page that should not have the footer
Because the footer will be scoped to everything underneath /app/(home)
Northeast Congo LionOP
Whoa
Thank you so much! That's exactly what I needed