useLoaderData in export handle

[nabilsarder]

Trying to create breadcrumbs that can handle dynamic routes. I am able to use useParams() in the export handle but useLoaderData() returns undefined.

export const handle = {
  breadcrumb: () => {
    const params = useParams() // returns valid response
    const data = useLoaderData() // returns undefined

    return <BreadcrumbLink urlPath={`/path/to/${params.id}`} label={data.label || ''} />
  }
}

Any ideas if this can be done?

[sergiodxa]

How are you calling breadcrumb? Also where you call breadcrumb will affect what loader data do you get.

If you define that function in the route routes/parent/child.tsx and you call it in routes/parent.tsx the loader data should be the one on routes/parent.tsx since that's where the "component" breadcrumb is rendered.

[nabilsarder]

Thank you! The data coming from the useLoaderData() in this breadcrumb would depend on the route in which this component renders, that makes sense. Using useMatches() in the root route to loop through the breadcrumbs and render them in the UI. Putting a loader function in this route fixed it.

[sergiodxa]

What you can do if you need the loader data of the root in breadcrumb you could pass it yourself.

let matches = useMatches()
let ui = matches
  .filter(match => match.handle?.Breadcrumb)
  .map(match => <match.handle.Breadcrumb {...match.data} />)

The match.data is the loader data of the match, so you can pass it that way to your breadcrumb component. Then render in your handle export you can receive it

export const handle = {
  Breadcrumb(data: LoaderData) => {
    let params = useParams() // returns valid response
    return <BreadcrumbLink urlPath={`/path/to/${params.id}`} label={data.label || ''} />
  }
}

[piotrkulpinski]

@sergiodxa Any idea how to infer the type from the loader function in the same file as handle?

I tried something like this but it doesn't work:

export const handle = {
  Breadcrumb: ({ alternative }: Awaited<ReturnType<typeof loader>>) => (
    <BreadcrumbsLink to={`/alternatives/${alternative.slug}`} label={alternative.name} />
  ),
}

export const loader = async ({ params: { slug } }: LoaderFunctionArgs) => {
  const alternative = await prisma.alternative.findUniqueOrThrow({
    where: { slug },
  })

  return json({ alternative })
}

[piotrkulpinski]

Something like this works, but I'm sure there's a better way:

export const handle = {
  Breadcrumb: ({ alternative }: Awaited<ReturnType<Awaited<ReturnType<typeof loader>>["json"]>>) => (
    <BreadcrumbsLink to={`/alternatives/${alternative.slug}`} label={alternative.name} />
  ),
}

[nartc]

@piotrkulpinski late here but while useLoaderData doesn't work, useRouteLoaderData('path_to_route_exposes_loader')