Using typesafe router properties in your own compoent props

[sjiep]

I have the case where I want to wrap the router Link component with a parent component. This parent component should have the prop to that is then passed on to the Link component.

My question is how can I type this prop such that it only allows for routes that are defined on the router. A minimal snippet with my own attempt would look something like this:

import { Link, LinkOptions } from '@tanstack/router'

interface ButtonLinkProps {
  // how do I make this type safe, it results to `string | undefined` instead of valid routes I have defined
  to: LinkOptions['to']
  children: string
}

export function ButtonLink(props: ButtonLinkProps) {
  return (
    <Link to={props.to} params={{}} search={{}}>
      <Button component='span'>{props.children}</Button>
    </Link>
  )
}

With the following declared in a different file:

const rootRoute = new RootRoute({
  component: App,
})

const indexRoute = new Route({
  getParentRoute: () => rootRoute,
  component: Index,
  path: '/',
})
const aRoute = new Route({
  getParentRoute: () => rootRoute,
  component: ComponentA,
  path: 'a',
})
const bRoute = new Route({
  getParentRoute: () => rootRoute,
  component: ComponentB,
  path: 'b',
})

const routeTree = rootRoute.addChildren([indexRoute, aRoute, bRoute])
const router = new Router({ routeTree })

declare module '@tanstack/router' {
  interface Register {
    router: typeof router
  }
}

[sjiep]

Well, I stumbled on this Q&A discussion #429 which basically answer my question.

The following worked for me on version 0.0.1-beta.104, assuming my ButtonLink component in the OP:

interface ButtonLinkProps {
  to: MakeLinkOptions['to']
  children: string
}

or if we simply want all props that can be provided to a Link

interface ButtonLinkProps extends MakeLinkOptions {
  children: string
}