Typesafe arrays of links

[abecks]

I have a universal page header component:

export interface PageHeaderProps {
  title: string
  tabs?: LinkProps[]
  toolbar?: JSX.Element
  breadcrumbs?: LinkProps[]
}

export const PageHeader = ({ title, tabs, toolbar, breadcrumbs }: PageHeaderProps) => {
  const breadcrumbItems = breadcrumbs?.map((item, index) => (
    <Link to={item.to} key={index} search={item.search} params={item.params}>
      {item.title}
    </Link>
  ))

The problem here is that LinkProps is too generic and doesn't provide type safety for each of the array items.

<Page.Header
  title="New Client"
  breadcrumbs={
    [
      {
        title: 'Clients',
        to: ClientsRoute.fullPath,
        // search: { status: CompanyStatus.ACTIVE },     // This should be required for this route
        search: {}, // instead I have to pass in empty search and params objects for every breadcrumb because at least one route uses them
        params: {},
      },
    ] as const
  }
/>

I see a few people asking about this here and on Discord. I think it would be useful to establish an example, as I can't find anything that works with the latest release.

There are a few discussions around this already, but the solutions are not fully type safe for params and search:
#570
#635

Wrapping a single <Link> in a typesafe way seems to be done like this:

import { Anchor as MantineAnchor } from '@mantine/core'
import { AnyRoute, Link, LinkProps, RegisteredRouter, RoutePaths } from '@tanstack/react-router'
import { ReactNode } from 'react'

export function Anchor<
  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = '',
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = '',
>({
  children,
  ...props // Spread the rest of the props
}: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> &
  React.RefAttributes<HTMLAnchorElement> & {
    children: ReactNode
  }) {
  return (
    <MantineAnchor component={Link} {...props}>
      {children}
    </MantineAnchor>
  )
}

Adapted from https://discord.com/channels/719702312431386674/1192472012585705504

Some insight into the current behavior here: #924

[abecks]

So this works, but you have to wrap every breadcrumb in a function:

export function link<
  TRouteTree extends AnyRoute = RegisteredRouter['routeTree'],
  TFrom extends RoutePaths<TRouteTree> | string = string,
  TTo extends string = '',
  TMaskFrom extends RoutePaths<TRouteTree> | string = TFrom,
  TMaskTo extends string = '',
>({
  ...props
}: LinkProps<TRouteTree, TFrom, TTo, TMaskFrom, TMaskTo> & React.RefAttributes<HTMLAnchorElement>) {
  return props as TypedLink
}

export interface TypedLink {
  title: string
  to: string
  search?: Record<string, unknown>
  params?: Record<string, unknown>
  hash?: string
}

export interface PageHeaderProps {
  title: string
  breadcrumbs?: TypedLink[]
}

<Page.Header
  title="New Client"
  breadcrumbs={[
    link({           // using "link" to force type safety for all link references but this feels HORRIBLE
      title: 'Clients',
      to: '/admin/clients',
      search: { status: CompanyStatus.ACTIVE }
    }),
  ]}
/>

Still trying to find a way to make an array type-safe.