Change parent layout based on child route matching
Hi, I have a parent layout component and I need to render it a bit differently if a certain child route is active. I've tried to do
useLoaderData({ from: "child route" }) but it throws if the child route is not matched.
Is it recommended to un-nest from the parent routes and just render the layout in the child route? If I do that, I can't grab the parent loaded data which means I have to repeat the parent data loading in the child route, it's not a problem, but I just wanted to know if there's a better way. Cheers3 Replies
correct-apricot•7mo ago
Having the same issue trying to populate a breadcrumb in the layout based on child data, have tried useLoaderData, importing the Route but none seems to be the right approach
flat-fuchsia•7mo ago
I think you should be able to use
useMatches for the breadcrumbscorrect-apricot•7mo ago
https://tanstack.com/router/v1/docs/framework/react/api/router/useChildMatchesHook
useChildMatches with a selector worked like a charm
useChildMatches hook | TanStack Router React Docs
The useChildMatches hook returns all of the child objects from the closest match down to the leaf-most match. It does not include the current match, which can be obtained using the useMatch hook. [!IM...