T
TanStack•2mo ago
exotic-emerald

Breadcrumbs with async loaders in between

I have a following folder structure: 
routes/
    $lang/
        _layout/
            a/
                index.tsx
                b/
                    index.tsx
       
        _layout.tsx
        index.tsx
    __root.tsx
routes/
    $lang/
        _layout/
            a/
                index.tsx
                b/
                    index.tsx
       
        _layout.tsx
        index.tsx
    __root.tsx
The a/index.tsx loader is async because it loads some data from CMS. If I visit /$lang/a/b, the breadcrumbs are not generating, because this is how I get the breadcrumbs, in the _layout.tsx: 
  const matches = useMatches();

  if (matches.some((match) => match.status === "pending")) return null;

  const matchesWithCrumbs = matches.filter((match) =>
    isMatch(match, "loaderData.crumb")
  );
// ...
  const matches = useMatches();

  if (matches.some((match) => match.status === "pending")) return null;

  const matchesWithCrumbs = matches.filter((match) =>
    isMatch(match, "loaderData.crumb")
  );
// ...
-- so the context is set by the loader() but it's async, and since it's not accessed directly, I assume, it is endlessly pending, meaning, that I have no loaderData for the /a.. Is there workarounds? I believe it's quite standard use case, and I wonder how others render breadcrumbs if some of the loaders is async? I also using Tanstack Start, but I'm not sure, if I should ask it there because I feel like it's only TRS's field..
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?