如何为@tanstack/react-router的Link组件实现类型安全封装？

要在封装TanStack React Router的Link组件时保留类型安全性，核心是复用框架提供的内置类型，同时利用路由生成的类型信息实现参数自动提示。以下是具体实现方案：

1. 导入必要的类型 #

首先从@tanstack/react-router中导入核心类型，同时确保你已经通过路由生成工具（比如createFileRoute）得到了具体路由的类型（比如示例中的page1、page2）。

import { Link, LinkProps, To } from '@tanstack/react-router';
import { PropsWithChildren } from 'react';
// 假设page2是通过createFileRoute生成的路由对象
import { page2 } from './routes/page2';

2. 封装WrappedLink组件 #

这个组件直接转发所有Link支持的属性，所以直接复用LinkProps即可，无需额外定义复杂类型：

// WrapperProps直接复用LinkProps，保留所有Link的类型定义
type WrapperProps = LinkProps;

function WrappedLink(props: PropsWithChildren<WrapperProps>) {
  return <Link {...props}>{props.children}</Link>;
}

3. 封装Container组件（带泛型支持） #

为了让Container能适配任意路由并自动推断参数类型，我们使用泛型来绑定目标路由的to和params类型：

// 定义泛型Props，绑定目标路由的to和Params类型
interface ContainerProps<TParsedRoute extends { to: To; $Params: Record<string, unknown> }> {
  to: TParsedRoute['to'];
  params: TParsedRoute['$Params'];
}

// 泛型组件，自动推断传入的路由类型
function Container<TParsedRoute extends { to: To; $Params: Record<string, unknown> }>(
  props: ContainerProps<TParsedRoute>
) {
  return <WrappedLink to={props.to} params={props.params} />;
}

4. 实际使用（保留类型提示） #

使用时，TypeScript会根据传入的to自动推断出允许的params类型，并提供实时提示：

import { page1 } from './routes/page1';

function Page() {
  const params = page1.useParams();

  // 此处TypeScript会自动提示page2要求的params字段，且校验类型是否匹配
  return <Container to={page2.to} params={{ foo: params.foo }} />;
}

关键说明 #

• 复用LinkProps确保WrappedLink完全继承Link的所有类型安全特性，包括to、params、search、hash等属性的校验。
• 泛型ContainerProps通过绑定路由对象的to和$Params类型，让TypeScript自动关联目标路由的参数要求，实现参数的自动补全和类型校验。
• 如果你不需要Container支持任意路由，也可以直接指定具体路由的类型，比如：

  interface ContainerProps {
    to: typeof page2.to;
    params: typeof page2.$Params;
  }
  

内容的提问来源于stack exchange，提问作者Roman Mahotskyi