-
-
Notifications
You must be signed in to change notification settings - Fork 10.8k
Closed
Labels
feature-requestUsed to close PRs that haven't gone through/been accepted the Proposal process yetUsed to close PRs that haven't gone through/been accepted the Proposal process yet
Description
Reproduction
Try to write a hook to generate breadcrumbs using useMatches such as:
import { UIMatch, useMatches } from 'react-router'
type BreadcrumbMatch = UIMatch<unknown, { breadcrumb: string }>
export function useBreadcrumbs(): { title: string; path?: string }[] {
return useMatches()
.filter((m): m is BreadcrumbMatch => !!m.handle?.breadcrumb)
.map((match, i, a) => ({
path: i < a.length - 1 ? match.pathname : undefined,
title: match.handle.breadcrumb,
}))
}There will be a typescript error because handle is defaulted to unknown, which forces us to write:
type MaybeBreadcrumbMatch = UIMatch<unknown, { breadcrumb?: string }>
export function useBreadcrumbs(): { title: string; path?: string }[] {
return (useMatches() as MaybeBreadcrumbMatch[])
.filter((m): m is BreadcrumbMatch => !!m.handle?.breadcrumb)System Info
Binaries:
Node: 24.2.0
pnpm: 10.13.1
(The rest is irrelevant to my issue.)Used Package Manager
npm
Expected Behavior
There should be a way to pass the generics of returned UIMatch from the useMatches() hook. Maybe a useMatches<A = unknown, B = unknown>(): UIMatch<A, B>[] would be non breaking and appropriate.
Actual Behavior
There's no way to type correctly without making use of as because the default type of handle is unknown
NesChaiyapon
Metadata
Metadata
Assignees
Labels
feature-requestUsed to close PRs that haven't gone through/been accepted the Proposal process yetUsed to close PRs that haven't gone through/been accepted the Proposal process yet