Add data from loader to context?
Im looking at the examples using the route context to construct a breadcrumb trail, and this is great except what if the data you need to construct the breadcrumb comes from data in the loader, and not just from stuff you can figure out in
beforeLoad? Is there a way to get the two to communicate?11 Replies
extended-salmon•2y ago
I worked on a breadcrumbs thing for someone else yesterday.
extended-salmon•2y ago
Sean Cassiere
StackBlitz
ruiaraujo012 Tanstack Router Breadcrumbs - StackBlitz
Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz
extended-salmon•2y ago
Its a matter of filtering out the routes to get the exact data you need. From there on its just a matter of rendering some UI.
The post this was from: https://discord.com/channels/719702312431386674/1212075083766431815
suitable-roseOP•2y ago
Thanks! I think the missing piece is being able to assign to the context, I don't think this is documented.
Hmm, when I do that dynamically (in an async loader function) it doesn't get updated. I suppose this is why the documentation has a
getTitle function instead of a plain string?extended-salmon•2y ago
In the liveMatches in the breadcrumbs, isn't the loaderData available?
Just checked, it returns the loaderData for each match.
Either ways, the flow of information is always
beforeLoad -> loader. The flow does not go backwards.suitable-roseOP•2y ago
Yeah, that totally makes sense. Currently I'm solving this by having
routeContext.getTitle be a function that takes loaderData from the same route and returns a string, so in my hook I can do route.routeContext.getTitle(route.loaderData). That gives me the result I need and doesn't seem too convoluted, unless you can think of a less roundabout way?extended-salmon•2y ago
Does your
getTitle function do anything special? Seems like something you could just do it within your page component.extended-salmon•2y ago
Here's an example of what I'm doing in my own app. https://github.com/SeanCassiere/nv-rental-clone/blob/04c036e22d8a11c0e62259f877c47545508fe0eb/src/routes/_auth/agreements/%24agreementId/index.route.lazy.tsx#L200-L202
I'm not even using a
getTitle function or anything like that... Simply, just setting the title on the page component using whatever data from above.GitHub
nv-rental-clone/src/routes/_auth/agreements/$agreementId/index.rout...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
suitable-roseOP•2y ago
I guess the main thing I can think of is that I need the title all the way up in the main layout (one level below
__root) because I'm using it with Helmet to set the page title.extended-salmon•2y ago
Well, you can't send data from a loader into context. So for your usecase, you'll need to use some other method of send data to the
_root or use something different for setting your page title.suitable-roseOP•2y ago
Cool, thanks. Really appreciate your help! ❤️