Breadcrumbs and sub-routes

[tidal spoke]

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?

[lilac heart]

there is nothing wrong with that, you can also omit the component option in the route.tsx file, it will default to Outlet

[tidal spoke]

Thanks

A quick question, can you share any link about authentication?

I'm searching about how to implement the redirect to the login when the backend send a 401 code

[lilac heart]

This depends heavily on your project. I would add a response interceptor to my axios instance.

[tidal spoke]

I try that

api.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.status === 401) {
      // Redirect to login route
      return router.navigate({
        to: '/',
        search: {
          'redirect-to': window.location.pathname,
        },
      });
    }

    return error;
  },
);

But after that I didn't get any error on the onError mutations from tanstack query