Next.js Discord

Discord Forum

Conditional Rendering: Exclude children from rendering <footer> in the RootLayout

Answered
Laysan Albatross posted this in #help-forum
Open in Discord
Avatar
Laysan AlbatrossOP
How would you do that? I tried some things, but I'm out of ideas and I have the strong feeling, that it's easier than I think.
The problem is I can't iterate threw all children and get the file path or something, because the relationships base on routing.

The problem sounds sooo basic.. I want that every page has a footer, but not the ones under /app/(home).

I even tried shit like parallel routes, to be able to pass a footer property into the RootLayout.
SOS
Image
Image
Answered by joulev
app/
  layout.tsx <- do NOT put the footer here
  page.tsx <- /
  (with-footer)/
    layout.tsx <- put the footer here
    about/page.tsx, pricing/page.tsx, etc.
View full answer

8 Replies

Avatar
Laysan AlbatrossOP
I mean, I could manually add the <footer> to each page, and ignore the one's where I dont want a footer, but that's 10/10 whack and surely not the best way of solving this issue
Avatar
joulev
app/
  layout.tsx <- do NOT put the footer here
  page.tsx <- /
  (with-footer)/
    layout.tsx <- put the footer here
    about/page.tsx, pricing/page.tsx, etc.
Answer
Avatar
Laysan AlbatrossOP
You mean put the whole layout except the footer in app/layout.tsx
And only add the footer to /app(with-footer)/layout.tsx
?
Avatar
joulev
yes
Avatar
Laysan AlbatrossOP
Like I said... I expected such an easy solution, fml, I spent a whole hour with that bs XD
Thank you so much man
Avatar
joulev
lol yeah, sometimes our brain just fails to find a brutally simple solution
have fun coding
Avatar
Laysan AlbatrossOP
works!