T
TanStack•9mo ago
equal-aqua

TanStack Start SSR Hydration Failure when using loader() for Breadcrumbs component

Playing around with TanStack Start and was trying to implement the breadcrumbs component with useMatches() via the loaderData defined during createFileRoute(). 
// _main.tsx
  const matches = useMatches();

  const breadcrumbItems = matches
    .filter((match) => (match.loaderData as { crumb: string })?.crumb)
    .map(({ pathname, loaderData }) => ({
      href: pathname,
      label: (loaderData as { crumb: string }).crumb,
    }));

// profile.tsx
export const Route = createFileRoute("/_main/profile")({
  component: RouteComponent,
  loader: () => ({
    crumb: "Profile",
  }),
});

// profile.update.tsx
export const Route = createFileRoute("/_main/profile/update")({
  component: RouteComponent,
  loader: () => ({
    crumb: "Update",
  }),
});
// _main.tsx
  const matches = useMatches();

  const breadcrumbItems = matches
    .filter((match) => (match.loaderData as { crumb: string })?.crumb)
    .map(({ pathname, loaderData }) => ({
      href: pathname,
      label: (loaderData as { crumb: string }).crumb,
    }));

// profile.tsx
export const Route = createFileRoute("/_main/profile")({
  component: RouteComponent,
  loader: () => ({
    crumb: "Profile",
  }),
});

// profile.update.tsx
export const Route = createFileRoute("/_main/profile/update")({
  component: RouteComponent,
  loader: () => ({
    crumb: "Update",
  }),
});
However, I faced hydration failure and the breadcrumbs failed to render as intended. Is there any way to tackle the hydration issue?
1 Reply
environmental-rose
environmental-rose•9mo ago
please provide a minimal complete example

Did you find this page helpful?