breadcrumbs with `fullPath` type error
i have this component for breadcrumbs
the
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
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
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
toto1. 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
