T
TanStack•2mo ago
ambitious-aqua

breadcrumbs with `fullPath` type error

i have this component for breadcrumbs 
function Breadcrumbs() {
  const breadcrumbs = useMatches().filter((match) => isMatch(match, "loaderData.crumb")).filter((match) => !!match.loaderData?.crumb);

  return (
      <BreadcrumbList>
        <BreadcrumbSeparator />
        {breadcrumbs.map((match, index) => (
           ...
              <Link
                activeOptions={{ exact: true, includeSearch: false }}
                search={(prev) => ({ ...prev, action: prev.action })}
                params={match.params}
                to={match.fullPath}
              >
                {match.loaderData?.crumb}
              </Link>
          ...
        ))}
      </BreadcrumbList>
  );
}
function Breadcrumbs() {
  const breadcrumbs = useMatches().filter((match) => isMatch(match, "loaderData.crumb")).filter((match) => !!match.loaderData?.crumb);

  return (
      <BreadcrumbList>
        <BreadcrumbSeparator />
        {breadcrumbs.map((match, index) => (
           ...
              <Link
                activeOptions={{ exact: true, includeSearch: false }}
                search={(prev) => ({ ...prev, action: prev.action })}
                params={match.params}
                to={match.fullPath}
              >
                {match.loaderData?.crumb}
              </Link>
          ...
        ))}
      </BreadcrumbList>
  );
}
the to param gives me the following error 
1. Type '"/" | "/groups" | "/account" | "/groups/$slug_id" | "/groups/" | "/groups/$slug_id/members" | "/groups/$slug_id/settings" | "/groups/$slug_id/join/$token"' is not assignable to type '"/" | "/groups" | "/account" | "/groups/$slug_id" | "." | "/groups/$slug_id/members" | "/groups/$slug_id/settings" | "/groups/$slug_id/join/$token" | "/about" | "/landing" | ".."'.
     Type '"/groups/"' is not assignable to type '"/" | "/groups" | "/account" | "/groups/$slug_id" | "." | "/groups/$slug_id/members" | "/groups/$slug_id/settings" | "/groups/$slug_id/join/$token" | "/about" | "/landing" | ".."'. Did you mean '"/groups"'? [2322]
1. Type '"/" | "/groups" | "/account" | "/groups/$slug_id" | "/groups/" | "/groups/$slug_id/members" | "/groups/$slug_id/settings" | "/groups/$slug_id/join/$token"' is not assignable to type '"/" | "/groups" | "/account" | "/groups/$slug_id" | "." | "/groups/$slug_id/members" | "/groups/$slug_id/settings" | "/groups/$slug_id/join/$token" | "/about" | "/landing" | ".."'.
     Type '"/groups/"' is not assignable to type '"/" | "/groups" | "/account" | "/groups/$slug_id" | "." | "/groups/$slug_id/members" | "/groups/$slug_id/settings" | "/groups/$slug_id/join/$token" | "/about" | "/landing" | ".."'. Did you mean '"/groups"'? [2322]
i don't understand what it's getting at nor why the groups page/layout is singled out they both have loaders defined like so 
export const Route = createFileRoute("/_protected/groups")({
  component: GroupsLayout,
  loader: () => ({ crumb: "Groups" }),
});
export const Route = createFileRoute("/_protected/groups/")({
  component: GroupsRoute,
  loader: () => ({ crumb: "" }), // no crumb- this is handled in the layout for nesting
});
export const Route = createFileRoute("/_protected/groups")({
  component: GroupsLayout,
  loader: () => ({ crumb: "Groups" }),
});
export const Route = createFileRoute("/_protected/groups/")({
  component: GroupsRoute,
  loader: () => ({ crumb: "" }), // no crumb- this is handled in the layout for nesting
});
the code itself seems to work, and i don't recall hitting this issue before some package upgrade. curious if there's a workaround other than a type ignore
1 Reply
exotic-emerald
exotic-emerald•2mo ago
this is caused by this issue https://github.com/TanStack/router/issues/3005
GitHub
Route.to: mismatched value and type for index routes · Issue #...
Which project does this relate to? Router Describe the bug The JS value of Route.to has a trailing slash, while the type does not. Your Example Website or App https://stackblitz.com/edit/github-x8v...

Did you find this page helpful?