如何编写React Router v6下带绝对路径的递归Routes类型？

你遇到的问题根源在于：当直接指定Route<"/home">类型时，子路由的泛型参数会被拓宽为模板字面量类型/home/${string}，而非具体的子路径字面量（比如/home/about）。这就导致深层子路由的约束变成了/home/${string}/${string}，只要路径符合“/home/两段字符串”的格式就会被允许，不管中间段是否和父路由的实际路径匹配。

解决方案：用类型推断函数约束层级路径 #

通过创建一个路由生成函数，让TypeScript自动推导每个层级路由的具体路径字面量，从而严格保证子路由路径必须以父路由路径为前缀。

type Route<BasePath extends string> = {
  path: BasePath;
  children?: Route<`${BasePath}/${string}`>[];
};

// 用函数触发类型推断，自动推导每个层级的具体路径
function createRoute<BasePath extends string>(route: Route<BasePath>): Route<BasePath> {
  return route;
}

验证无效路由 #

现在用createRoute创建你原来的无效路由配置，TypeScript会直接报错，因为深层路径/home/nonabout/whatever不符合/home/about/${string}的约束：

const invalidRoute = createRoute({
  path: "/home",
  children: [
    {
      path: "/home/about",
      children: [
        {
          // ❌ TypeScript报错：类型'"home/nonabout/whatever"'不能赋值给类型'`/home/about/${string}`'
          path: "/home/nonabout/whatever", 
        },
      ],
    },
  ],
});

为什么这个方案有效？ #

当你通过createRoute创建路由时，TypeScript会为每个层级的路由推断出具体的字面量类型：

1. 顶层路由的BasePath被推断为"/home"；
2. 子路由的BasePath被推断为"/home/about"（而非宽泛的/home/${string}）；
3. 深层子路由的路径就必须严格匹配/home/about/${string}，任何不符合前缀的路径都会触发类型错误。

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