如何获取@tanstack/react-router中Link.to自动生成的路径联合类型？

有几种实用方法可以提取to属性的类型，适配不同的路由定义场景：

1. 从自定义路由器实例提取（推荐） #

当你通过createRouter创建路由器后，可直接从路由器的navigate方法参数中提取类型，这是最准确的方式——完全匹配你的路由配置：

import { createRouter } from '@tanstack/react-router';

// 定义你的路由配置
const router = createRouter({
  routes: [
    // 你的路由规则
  ],
});

// 提取to属性的完整类型（支持字符串路径和带参数的对象形式）
export type RouterToType = Parameters<typeof router.navigate>[0];

之后可在任意地方使用该类型：

// 字符串路径
const navigateTo: RouterToType = '/some-route';
// 带参数的对象形式
const navigateToWithParams: RouterToType = {
  path: '/user/$id',
  params: { id: '123' },
};

2. 直接从Link组件Props提取 #

若无需关联特定路由器实例，也可直接从Link组件的Props中提取to的类型：

import { Link } from '@tanstack/react-router';

export type LinkToType = React.ComponentProps<typeof Link>['to'];

3. 从自动生成的路由树文件提取（文件系统路由场景） #

如果你使用TanStack Router的文件系统路由（比如createFileRoute），框架会自动生成routeTree.gen.ts文件，其中包含RoutePaths类型——这是所有合法字符串路由路径的联合类型：

import type { RoutePaths } from '../routeTree.gen.ts';

// RoutePaths 是所有合法路由字符串的集合，例如 '/home' | '/user/$id' | ...
const validPath: RoutePaths = '/some-route';

注意：RoutePaths仅覆盖字符串形式的路由，若需支持带参数的对象形式路由，优先选择第一种方法。

内容的提问来源于stack exchange，提问作者Michael Hsu