slender pollen
Context: I am creating a breadcrumb and I want to show the breadcrumb in a single customer view page. Instead of the customer id, I want to show the name of the Customer in the breadcrumb which is present in the loader data. I tried to use the useLoaderData hook inside the handle function but it does not seem to work.
jade forge
You can pass the data through props.
slender pollen
I am rendering my breadcrumbs in my root file like so:
export default function App(){
const matches = useMatches();
return (
<Breadcrumbs>
{matches
// skip routes that don't have a breadcrumb
.filter((match) => match.handle && match.handle.breadcrumb)
// render breadcrumbs!
.map((match, index) => (
<div key={index}>{match.handle?.breadcrumb(match)}</div>
))}
</Breadcrumbs>)
}
But I want to use data from the child loader
jade forge
Yea, you should be able to get the loader data from the function args.
breadcrumb: ({ data }) => {
...
}
But if I am rendering the Breadcrumbs in parent then won't I be getting the loader data of the parent?
jade forge
You can pass the entires matches array as a prop to your breadcrumb too.
Then you can access loader data of parent in breadcrumb.
slender pollen
I need the loader data of the child though to get customer name
jade forge
matches should have all the data from each active loader though.
slender pollen
```ts
breadcrumb: ({ data }) => {
...
}
```
How do I do this in typescript?
jade forge
I think like this?
import type { RouteMatch } from '@remix-run/react'
export const handle = {
breadcrumb: (matches: RouteMatch[]) => {
...
}
}
Depends on what you're passing in to breadcrumb.
No need to type the handle export.
slender pollen
Thanks a lot, I am passing just the RouteMatch in my case.