Menu
I want to pass props to Layout for some dynamic routes. This is the project structure:
/app
-/(site)
--/layout.tsx
--/page.tsx
--/[slug]/page.tsx
--/[slug]/layout.tsx
in the site layout:
export default async function IndexRoute({
children
}: {
children: React.ReactNode
}) {
const settings = await getSettings()
const layout = (
<html lang='en'>
<body>
<div className='flex min-h-screen flex-col'>
<a className='sr-only' href='#mainContent'>
Skip to content
</a>
<Suspense>
<Masthead />
</Suspense>
<main className='flex flex-1 flex-col ' id='mainContent'>
<Suspense>{children}</Suspense>
</main>
<Suspense>
<Foundation menus={settings.menus.footer} />
</Suspense>
</div>
</body>
</html>
)
return layout
}
Apparently this layout will consider the [slug] layout as a nested layout. My goal here is to create a layout for the [slug] routes so I can pass props to that layout. How can I solve this?
504
asked Sep 13 '25 03:09
there is no communication between a page and a layout.
page.tsx is rendered as the children component of the layout. From here
Unlike Pages, Layout components do not receive the searchParams prop. This is because a shared layout is not re-rendered during navigation which could lead to stale searchParams between navigations.
That is because a layout file serves as a template or structural framework that defines the overall structure, design, and arrangement of elements for multiple pages within a website or web application. It does not rerender so user always see the layout components on the browser even when they navigate to another page.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
