How to Create Breadcrumbs with Dynamic Labels That Require an API Call?

[vishal-tiwari]

What is the recommended approach to implement breadcrumbs in TanStack React Router when the labels need to be fetched from an API (e.g., fetching a category name by ID)?

• How can we handle async data fetching efficiently for breadcrumbs?

• Should we use loaders, context, or another approach?

• How can we avoid unnecessary API calls and ensure a smooth user experience?

Would love to hear recommendations!

[OwenVey]

I have this same question!

[reonum]

Hello, has anyone found a solution ? I have the exact same issue.

[ilarramendi]

I just load the data with tanstack query, and have a breadcrumb component inside each route that uses that data to generate a breadcrumb, why dosnt this work for you?
You can also prefetch the query in the loader to ensure the content is loaded when the page renders