TanStackT
TanStack•12mo ago•
9 replies
urgent-maroon

Breadcrumbs and sub-routes

Hi everyone
I'm trying to create breadcrumbs using the Tanstack Router hooks but I'm facing a problem
If my route is:
|- admin
|--- budgets
|----- index.tsx
|----- new.tsx
|----- $budgetId.tsx


And set the title on the loader for all the files and using the useMatches I can't have Admin > Budgets > New only have Admin > New. This is my code for the breadcrumbs:
function useBreadcrumbs() {
  const matches = useMatches();

  const matchesWithTitles = useMemo(() => matches.filter((match) => isMatch(match, 'loaderData.title')), [matches]);

  return useMemo(
    () =>
      matchesWithTitles.map(({ pathname, loaderData }) => ({
        href: pathname,
        label: loaderData?.title,
      })),
    [matchesWithTitles],
  );
}


For have Admin > Budgets > New I need to have:
|- admin
|--- budgets
|----- route.tsx // this have the title on the load and the component is only `<Outlet />`
|----- index.tsx
|----- new.tsx
|----- $budgetId.tsx


Anyone can help me? What I'm doing wrong?
image.png
Was this page helpful?