feat: add bindings for Route.Link and routeApi.Link (#4095)

This allows `Route.Link` and `routeApi.Link` bindings instead of manual
`from`.

We never used to be able to do this due to circular issues but it seems
this is no longer an issue since all the changes to the types

---------

Co-authored-by: TkDodo <[email protected]>

Author: chorobin

packages/react-router/src/link.tsx

@@ -452,9 +452,12 @@ export type CreateLinkProps = LinkProps<
   string
 >
 
-export type LinkComponent<TComp> = <
+export type LinkComponent<
+  in out TComp,
+  in out TDefaultFrom extends string = string,
+> = <
   TRouter extends AnyRouter = RegisteredRouter,
-  const TFrom extends string = string,
+  const TFrom extends string = TDefaultFrom,
   const TTo extends string | undefined = undefined,
   const TMaskFrom extends string = TFrom,
   const TMaskTo extends string = '',

packages/react-router/src/route.ts renamed to packages/react-router/src/route.tsx

@@ -4,13 +4,15 @@ import {
   BaseRouteApi,
   notFound,
 } from '@tanstack/router-core'
+import React from 'react'
 import { useLoaderData } from './useLoaderData'
 import { useLoaderDeps } from './useLoaderDeps'
 import { useParams } from './useParams'
 import { useSearch } from './useSearch'
 import { useNavigate } from './useNavigate'
 import { useMatch } from './useMatch'
 import { useRouter } from './useRouter'
+import { Link } from './link'
 import type {
   AnyContext,
   AnyRoute,
@@ -39,8 +41,8 @@ import type { UseMatchRoute } from './useMatch'
 import type { UseLoaderDepsRoute } from './useLoaderDeps'
 import type { UseParamsRoute } from './useParams'
 import type { UseSearchRoute } from './useSearch'
-import type * as React from 'react'
 import type { UseRouteContextRoute } from './useRouteContext'
+import type { LinkComponent } from './link'
 
 declare module '@tanstack/router-core' {
   export interface UpdatableRouteOptionsExtensions {
@@ -61,6 +63,7 @@ declare module '@tanstack/router-core' {
     useLoaderDeps: UseLoaderDepsRoute<TId>
     useLoaderData: UseLoaderDataRoute<TId>
     useNavigate: () => UseNavigateResult<TFullPath>
+    Link: LinkComponent<'a', TFullPath>
   }
 }
 
@@ -133,6 +136,16 @@ export class RouteApi<
   notFound = (opts?: NotFoundError) => {
     return notFound({ routeId: this.id as string, ...opts })
   }
+
+  Link: LinkComponent<'a', RouteTypesById<TRouter, TId>['fullPath']> =
+    React.forwardRef((props, ref: React.ForwardedRef<HTMLAnchorElement>) => {
+      const router = useRouter()
+      const fullPath = router.routesById[this.id as string].fullPath
+      return <Link ref={ref} from={fullPath as never} {...props} />
+    }) as unknown as LinkComponent<
+      'a',
+      RouteTypesById<TRouter, TId>['fullPath']
+    >
 }
 
 export class Route<
@@ -241,6 +254,19 @@ export class Route<
   useNavigate = (): UseNavigateResult<TFullPath> => {
     return useNavigate({ from: this.fullPath })
   }
+
+  Link: LinkComponent<'a', TFullPath> = React.forwardRef(
+    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {
+      const router = useRouter()
+      return (
+        <Link
+          ref={ref}
+          from={router.routesById[this.id].fullPath as never}
+          {...props}
+        />
+      )
+    },
+  ) as unknown as LinkComponent<'a', TFullPath>
 }
 
 export function createRoute<
@@ -426,6 +452,19 @@ export class RootRoute<
   useNavigate = (): UseNavigateResult<'/'> => {
     return useNavigate({ from: this.fullPath })
   }
+
+  Link: LinkComponent<'a', '/'> = React.forwardRef(
+    (props, ref: React.ForwardedRef<HTMLAnchorElement>) => {
+      const router = useRouter()
+      return (
+        <Link
+          ref={ref}
+          from={router.routesById[this.id].fullPath as never}
+          {...props}
+        />
+      )
+    },
+  ) as unknown as LinkComponent<'a', '/'>
 }
 
 export function createRootRoute<

packages/react-router/tests/routeApi.test-d.tsx

@@ -1,6 +1,6 @@
 import { describe, expectTypeOf, test } from 'vitest'
 import { createRootRoute, createRoute, createRouter, getRouteApi } from '../src'
-import type { MakeRouteMatch, UseNavigateResult } from '../src'
+import type { LinkComponent, MakeRouteMatch, UseNavigateResult } from '../src'
 
 const rootRoute = createRootRoute()
 
@@ -87,6 +87,12 @@ describe('getRouteApi', () => {
       MakeRouteMatch<typeof routeTree, '/invoices/$invoiceId'>
     >()
   })
+  test('Link', () => {
+    const Link = invoiceRouteApi.Link
+    expectTypeOf(Link).toEqualTypeOf<
+      LinkComponent<'a', '/invoices/$invoiceId'>
+    >()
+  })
 })
 
 describe('createRoute', () => {

packages/solid-router/src/link.tsx

@@ -509,9 +509,12 @@ export type CreateLinkProps = LinkProps<
   string
 >
 
-export type LinkComponent<TComp> = <
+export type LinkComponent<
+  in out TComp,
+  in out TDefaultFrom extends string = string,
+> = <
   TRouter extends AnyRouter = RegisteredRouter,
-  const TFrom extends string = string,
+  const TFrom extends string = TDefaultFrom,
   const TTo extends string | undefined = undefined,
   const TMaskFrom extends string = TFrom,
   const TMaskTo extends string = '',

packages/solid-router/src/route.ts renamed to packages/solid-router/src/route.tsx

@@ -4,6 +4,7 @@ import {
   BaseRouteApi,
   notFound,
 } from '@tanstack/router-core'
+import { Link } from './link'
 import { useLoaderData } from './useLoaderData'
 import { useLoaderDeps } from './useLoaderDeps'
 import { useParams } from './useParams'
@@ -41,6 +42,7 @@ import type { UseParamsRoute } from './useParams'
 import type { UseSearchRoute } from './useSearch'
 import type * as Solid from 'solid-js'
 import type { UseRouteContextRoute } from './useRouteContext'
+import type { LinkComponent } from './link'
 
 declare module '@tanstack/router-core' {
   export interface UpdatableRouteOptionsExtensions {
@@ -61,6 +63,7 @@ declare module '@tanstack/router-core' {
     useLoaderDeps: UseLoaderDepsRoute<TId>
     useLoaderData: UseLoaderDataRoute<TId>
     useNavigate: () => UseNavigateResult<TFullPath>
+    Link: LinkComponent<'a', TFullPath>
   }
 }
 
@@ -128,6 +131,14 @@ export class RouteApi<
   notFound = (opts?: NotFoundError) => {
     return notFound({ routeId: this.id as string, ...opts })
   }
+
+  Link: LinkComponent<'a', RouteTypesById<TRouter, TId>['fullPath']> = (
+    props,
+  ) => {
+    const router = useRouter()
+    const fullPath = router.routesById[this.id as string].fullPath
+    return <Link from={fullPath as never} {...props} />
+  }
 }
 
 export class Route<
@@ -230,6 +241,12 @@ export class Route<
   useNavigate = (): UseNavigateResult<TFullPath> => {
     return useNavigate({ from: this.fullPath })
   }
+
+  Link: LinkComponent<'a', TFullPath> = (props) => {
+    const router = useRouter()
+    const fullPath = router.routesById[this.id as string].fullPath
+    return <Link from={fullPath as never} {...props} />
+  }
 }
 
 export function createRoute<
@@ -411,6 +428,12 @@ export class RootRoute<
   useNavigate = (): UseNavigateResult<'/'> => {
     return useNavigate({ from: this.fullPath })
   }
+
+  Link: LinkComponent<'a', '/'> = (props) => {
+    const router = useRouter()
+    const fullPath = router.routesById[this.id as string].fullPath
+    return <Link from={fullPath as never} {...props} />
+  }
 }
 
 export function createRouteMask<

packages/solid-router/tests/routeApi.test-d.tsx

@@ -1,5 +1,6 @@
 import { describe, expectTypeOf, test } from 'vitest'
 import { createRootRoute, createRoute, createRouter, getRouteApi } from '../src'
+import type { LinkComponent } from '../src'
 import type { Accessor } from 'solid-js'
 import type { MakeRouteMatch, UseNavigateResult } from '@tanstack/router-core'
 
@@ -96,6 +97,12 @@ describe('getRouteApi', () => {
       Accessor<MakeRouteMatch<typeof routeTree, '/invoices/$invoiceId'>>
     >()
   })
+  test('Link', () => {
+    const Link = invoiceRouteApi.Link
+    expectTypeOf(Link).toEqualTypeOf<
+      LinkComponent<'a', '/invoices/$invoiceId'>
+    >()
+  })
 })
 
 describe('createRoute', () => {