Breadcrumbs metadata
In React Router you can add a handle to a route for information about it (e.g. crumb names) and then use useMatches() to get the path information. Where is a good place to add this breadcrumd data in a Tanstack Route?
5 Replies
wise-white•2y ago
If the data remains static, the createFileRoute option accepts a static option which you can use to define this data for the route.
https://tanstack.com/router/latest/docs/framework/react/guide/static-route-data
Static Route Data | TanStack Router Docs
When creating routes, you can optionally specify a staticData property in the route's options. This object can literally contain you want it to be as long as it's synchronous available when you create your route.
In addition to being able to access this data from the route itself, you can also access it from any match under the match.staticDat...
wise-white•2y ago
Or you could also dynamically build this data in the beforeLoad callback so it gets merged into the Route context.
genetic-orange•17mo ago
@Sean Cassiere how can one handle the double link case? For instance, in your example (thanks btw that cleared up a lot of things for me), if you select the "Authors" link, the breadcrumbs match both /private/authors & /private/authors/ ...
wise-white•17mo ago
It be a mix of using StaticRouteData and using the
activeProps options on the link to determine that.
I'd start off by using the useMatches hook (or the useParentMatches/useChildMatches hooks) and see what data is returned from there. You can probably do some filtering based on your static route data.wise-white•17mo ago
Also, keep an eye on this PR: https://github.com/TanStack/router/pull/2058
Should help with any typescript errors that get thrown or way. You can probably get around this by using
// @ts-expect-error and remove then once tsc tells yells at you that they are no longer needed.GitHub
feat(react-router): allow narrowing of matches with
useMatches by...useMatches returns a union of all matches
Currently useMatches returns single match type with different properties which are a union of everything. loaderData is a union of all loaderData, routeId ...