T
TanStack•2y ago
genetic-orange

Deep routes with route matching

Hi, Anyone here that knows of a way to create deeply nested routes where it is possible to use useMatches (or any other function) for creating breadcrumbs? 
__root.tsx
index.tsx
posts.tsx (set breadcrumb title in context)
posts_.$postId.tsx (set breadcrumb title in context)
__root.tsx
index.tsx
posts.tsx (set breadcrumb title in context)
posts_.$postId.tsx (set breadcrumb title in context)
In the posts_.$postId.tsx I want to render a breadcrumb where I have access to the title set in posts.tsx. Am I approaching this the wrong way maybe? I need to do deep nesting as I do not want an <Outlet /> in my posts.tsx
1 Reply
genetic-orange
genetic-orangeOP•2y ago
I ended up using posts.tsx with an outlet and setting title in the context to Posts. And posts.index.tsx file for listing posts and setting title in context to undefined. I then only render breadcrumbs from matches that have a title set in context. Final implementation was using each routes routeContext as it returns en empty object by default if context is not set for that route.

Did you find this page helpful?