Breadcrumbs
I'm struggling to find the right solution to create breadcrumbs in the following route structure:
- root:
-
/segment
- /segment/$id
- /segment/$id/$number
All routes are direct children of root.
In the root route I'd like to create the following breadcrumb:
When match is /segment/$id: "segment > id"
When match is /segment/$id/$number: "segment > id > number"
The recommended way of doing breadcrumbs is by passing titles in the routeContext, and in my root route filter for title props and render them in my breadcrumbs. But because all routes are direct children of root /segment and /segment/$id will not show up in matches when /segment/$id/$number is active.
Has anyone solved a similar issue?2 Replies
correct-apricot•3y ago
Is there a good reason to not nest the routes?
Or return an array of breadcrumb nodes from each route's context instead of just a title.
afraid-scarletOP•3y ago
Thanks for the response!
I’d prefer not to nest them.
/segment, /segment/$id and /segment/$id/$number have an identical layout that should be rendered in the outlet of root.
I’ve tried to nest the routes, but then I’d have to check if /segment or /segment/$id is the latest item in the matches. If it’s the latest match I can render the content, if not I have to return an <Outlet />.
It works, but it’s not very clean imo. If /segment/$id/$number would be the match it means that all loaders from /segment and /segment/$id would be called which isn’t necessary.
Do you have a suggestion on how to pass the breadcrumb nodes from each routes? I’ve tried to add a breadcrumbs prop to the RouteContext set to LinkPropsOptions but it causes a circular dependency issue.