@tanstack/react-router (Typescript) - 如何获取为 Link.to prop 自动生成的联合类型字符串？

Question

就像标题一样！ tanstack 的打字稿支持是一个救星，但我想知道如何获取生成的路由路径的实际类型。

例如，

<Link to="/some-route">

有打字稿支持。有没有办法获取

to

道具的类型？

我尝试从

@tanstack/react-router

导入并尝试其他类型，但找不到任何东西。我也找不到这方面的任何文档。

Answer 1

Tanstack Router 可以自动生成路由树文件，其中包含与路由相关的类型。 我使用命令创建了一个示例应用程序：

npm create @tanstack/router@latest

，我在

src/routeTree.gen.ts

中找到了以下代码：

export interface FileRoutesByTo {
  '/': typeof IndexRoute
  '/about': typeof AboutRoute
}

Vite 运行时，当

route

目录下有新文件添加时，该文件会自动更新。 路由文件设置在

vite.config.ts

中使用

TanStackRouterVite()

插件处理：

export default defineConfig({
  plugins: [TanStackRouterVite({}), react()],
})

例如，您可以使用

generatedRouteTree

选项自定义生成的路由树文件的名称。 （默认为

src/routeTree.gen.ts

）

注意：此说明适用于基于文件的路由。其他路由方法可能有不同的配置。