Loader data from pathless layout
Is it possible to access a route’s loader data from a parent pathless layout?
I need to render a common layout component which needs part of the data loaded by all the child routes loaders (I cannot split the fetch or repeat it in the layout route loader too).
I tried using the unbounded global “useLoaderData({strict: false})” but it always returns undefined.
My other way would be to use a global state manager but I’d like to try in a more idiomatic way first.
3 Replies
inland-turquoiseOP•3w ago
Up ^
optimistic-gold•3w ago
child loader data is not accessible by parents
can you share some more details?
inland-turquoiseOP•3w ago
Thanks for the response :)
I have a series of routes, which are tabs of a user page (gallery, likes, profile etc.).
All of them share a common layout in the top part of each page, a user header, with the avatar, the username, and some action button.
Sadly, all the data of a given view comes from the external (not mine) endpoint and contains both the common data (user header) and the data of the specific route, leading to a full change of view, with pending component rendering.
I'd like to maintain the common part of the layout (the user header, as stated before) across the pages owned by the same user.
So, my idea was to extract in a pathless layout that common user header, use the global
useLoaderData({strict: false}) in that layout, to keep mounted the user header component.
Obviously, on the first landing, the hook would return undefined because the matched child route's loader is still fetching data and I'd render a skeleton in the layout route, just for this situation.