Parent layout.tsx get data from child dynamic route
Answered
Spot-breasted Oriole posted this in #help-forum
Spot-breasted OrioleOP
Hi,
I have the following structure (image) and would like to put a breadcrumb component inside layout.tsx that would be displayed for all children.
If possible I would like to have this component only in layout.tsx instead of having to place one in each subfolder. Is this possible?
Right now if I access any route/ sub route I cannot see the slug params.
Scenario:
- /shop:
- /shop/juice:
- /shop/juice/orange:
I have the following structure (image) and would like to put a breadcrumb component inside layout.tsx that would be displayed for all children.
If possible I would like to have this component only in layout.tsx instead of having to place one in each subfolder. Is this possible?
Right now if I access any route/ sub route I cannot see the slug params.
use client can be used as long as I can do some server side pre rendering (generateStaticParams?)Scenario:
- /shop:
Shop- /shop/juice:
Shop > Juice- /shop/juice/orange:
Shop > Juice > OrangeAnswered by B33fb0n3
you can archive this, by playing (another/your) layout in the next folder (or even one layer more). Like that the layout can receive the param and render this specific breadcrumb.
Of course you can also have a client component, that handles this process. Sometimes it's good to use client components
Of course you can also have a client component, that handles this process. Sometimes it's good to use client components
8 Replies
@Spot-breasted Oriole Hi,
I have the following structure (image) and would like to put a breadcrumb component inside layout.tsx that would be displayed for all children.
If possible I would like to have this component only in layout.tsx instead of having to place one in each subfolder. Is this possible?
Right now if I access any route/ sub route I cannot see the slug params.
`use client` can be used as long as I can do some server side pre rendering (generateStaticParams?)
Scenario:
- /shop: `Shop`
- /shop/juice: `Shop > Juice`
- /shop/juice/orange: `Shop > Juice > Orange`
you can archive this, by playing (another/your) layout in the next folder (or even one layer more). Like that the layout can receive the param and render this specific breadcrumb.
Of course you can also have a client component, that handles this process. Sometimes it's good to use client components
Of course you can also have a client component, that handles this process. Sometimes it's good to use client components
Answer
@B33fb0n3 you can archive this, by playing (another/your) layout in the next folder (or even one layer more). Like that the layout can receive the param and render this specific breadcrumb.
Of course you can also have a client component, that handles this process. Sometimes it's good to use client components
Spot-breasted OrioleOP
My main concern is SEO. If I make the breadcrumb as a client component and use the pathname this could work but since the pathname would be inside Breadcrumb.tsx, I am not sure how I can pre render/ cache all possible paths.
Also if let's say I manage to implement server side rendering for the client component. How can I test if the result was generated dynamically from client side, or from server cache?
Also if let's say I manage to implement server side rendering for the client component. How can I test if the result was generated dynamically from client side, or from server cache?
@Spot-breasted Oriole My main concern is SEO. If I make the breadcrumb as a client component and use the pathname this could work but since the pathname would be inside Breadcrumb.tsx, I am not sure how I can pre render/ cache all possible paths.
Also if let's say I manage to implement server side rendering for the client component. How can I test if the result was generated dynamically from client side, or from server cache?
you can of course also make your Breadcrumb.tsx serverside and access the dynamic parts of your url as well [(see here)](https://nextjs.org/docs/app/api-reference/file-conventions/page#params-optional). Then push the params via props to the breadcrumb and your generateStaticParams will pre generate all pages (and of course with breadcrumbs) 👍
Spot-breasted OrioleOP
Thanks I will look into this
@Spot-breasted Oriole Thanks I will look into this
When will you look into this?
Spot-breasted OrioleOP
Couple hours, will close the post