TanStack•14mo 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

|- admin
|--- budgets
|----- index.tsx
|----- new.tsx
|----- $budgetId.tsx

And set the

title

title

on the

loader

loader

for all the files and using the

useMatches

useMatches

I can't have

Admin > Budgets > New

Admin > Budgets > New

only have

Admin > New

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],
  );
}

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

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

|- 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?

TanStack•14mo 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

|- admin
|--- budgets
|----- index.tsx
|----- new.tsx
|----- $budgetId.tsx

And set the

title

title

on the

loader

loader

for all the files and using the

useMatches

useMatches

I can't have

Admin > Budgets > New

Admin > Budgets > New

only have

Admin > New

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],
  );
}

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

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

|- 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?

Breadcrumbs and sub-routes

Similar Threads

Breadcrumbs and sub-routes

Similar Threads

Similar Threads

Similar Threads