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?

TanStack•15mo ago•

1 reply

uncertain-scarlet

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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads