T
TanStack•11mo ago
optimistic-gold

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 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],
  );
}
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
|- 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?
No description
5 Replies
flat-fuchsia
flat-fuchsia•11mo ago
there is nothing wrong with that, you can also omit the component option in the route.tsx file, it will default to Outlet
optimistic-gold
optimistic-goldOP•11mo ago
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
flat-fuchsia
flat-fuchsia•11mo ago
This depends heavily on your project. I would add a response interceptor to my axios instance.
optimistic-gold
optimistic-goldOP•11mo ago
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;
  },
);
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
flat-fuchsia
flat-fuchsia•11mo ago
api.interceptors.response.use(
  undefined, // This is not important, but you should use undefined rather than defining a new function here, axios will use it's default value if undefined is passed
  (error) => {
    if (error.status === 401) {
      // Redirect to login route
      router.navigate({
        to: '/',
        search: {
          'redirect-to': window.location.pathname,
        },
      });
    }

    return Promise.reject(error);
  },
);
api.interceptors.response.use(
  undefined, // This is not important, but you should use undefined rather than defining a new function here, axios will use it's default value if undefined is passed
  (error) => {
    if (error.status === 401) {
      // Redirect to login route
      router.navigate({
        to: '/',
        search: {
          'redirect-to': window.location.pathname,
        },
      });
    }

    return Promise.reject(error);
  },
);

Did you find this page helpful?