Next.js Discord

Discord Forum

Parallel routes with slots used for rendering different header depending on route

Unanswered
Brewer's Sparrow posted this in #help-forum
Open in Discord
Brewer's SparrowOP
I have a case where I want to display a different header based on what page the user is browsing.

Imagine this root layout:
(
)
export default async function Layout({
  children,
  header,
}: Readonly<{
  children: React.ReactNode;
  header: React.ReactNode;
}>) {
  return (
    <html>
      <body className={`${sourceSans3.variable}`}>
        {header}
        {children}
      </body>
    </html>
  );
}
(
)

I have the following folder structure:
(
)
app/
├ layout.tsx
├ @header/
│  ├─ default.tsx
│
├─ partner/
│  ├─ page.tsx
│  ├─ @header/
│  │  ├─ page.tsx
│  
(
)

I was under the impression that the header inside root folder shouls render for lal paths exept when I visit the partner route. Then it should render the header inside /partner/@header . It does not. I have tried naming it both default.tsx and page.tsx
Have I misunderstood how this works?

0 Replies