如何正确使用TanStack React Router的Route类型获取路由path？

问题代码 #

用户编写的TypeScript代码如下：

import type {Route} from "@tanstack/react-router";
import {Route as MeRoute} from '@/app/(start)/me/index.tsx'
import {Route as MessageRoute} from '@/app/(start)/message/index.tsx'

interface Item {
  label: string
  route: Route
}

const items: Item[] = [
  {
    label: "me",
    route: MeRoute
  },
  {
    label: "message",
    route: MessageRoute
  }
]

报错信息 #

运行时触发类型不兼容错误：

Types of property isRoot are incompatible.
Type false is not assignable to type true
Test. tsx(14, 3): The expected type comes from property route which is declared here on type Item

问题原因 #

@tanstack/react-router中的Route类型特指根路由（强制isRoot: true），而你导入的MeRoute、MessageRoute属于子路由，它们的isRoot属性值为false，直接用Route类型约束子路由实例就会触发类型不匹配错误。

正确实现方式 #

方案1：使用通用路由类型约束 #

改用AnyRoute类型（TanStack Router提供的通用路由类型，兼容所有路由实例）来定义Item接口，这样就能正常导入子路由并获取路径：

import type { AnyRoute } from "@tanstack/react-router";
import { Route as MeRoute } from '@/app/(start)/me/index.tsx'
import { Route as MessageRoute } from '@/app/(start)/message/index.tsx'

interface Item {
  label: string
  route: AnyRoute
}

const items: Item[] = [
  {
    label: "me",
    route: MeRoute
  },
  {
    label: "message",
    route: MessageRoute
  }
]

// 获取路由路径示例
const mePath = items[0].route.path;

方案2：直接导出并使用路由路径 #

如果只需要获取路由路径，没必要导入整个路由实例，可以在每个路由文件中单独导出路径：

在@/app/(start)/me/index.tsx中：

import { createRoute } from "@tanstack/react-router";

export const Route = createRoute({
  path: '/me',
  // 其他路由配置...
});

// 单独导出路径
export const mePath = Route.path;

同理在@/app/(start)/message/index.tsx中导出messagePath，然后在使用文件中：

import { mePath } from '@/app/(start)/me/index.tsx';
import { messagePath } from '@/app/(start)/message/index.tsx';

interface Item {
  label: string
  path: string
}

const items: Item[] = [
  {
    label: "me",
    path: mePath
  },
  {
    label: "message",
    path: messagePath
  }
]

这种方式更轻量化，也完全避免了类型冲突问题。

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