TanStack Router扁平化路由文件动态分段配置有效性及使用咨询

问题（翻译后） #

现有如下目录结构：

-> routes
--> $a.$b.$c.tsx
--> a.$b.$c.tsx  
--> a.b.$c.tsx

请问该基于文件的路由配置是否合法？编译器提示不合法，原因是TanStack Router插件生成的routeTree.gen.ts文件中存在三个同名符号ABCRoute。请问能否按上述方式在扁平文件中使用动态分段？

回答 #

这种配置不合法，核心问题出在TanStack Router的路由符号生成规则上：它会把文件名里的.作为分隔符拆分，不管是静态段还是$开头的动态段，都会提取每个分段的首字母大写拼接成路由符号名。

具体到你的三个文件：

• $a.$b.$c.tsx 拆分后是$a、$b、$c，生成符号ABCRoute
• a.$b.$c.tsx 拆分后是a、$b、$c，同样生成ABCRoute
• a.b.$c.tsx 拆分后是a、b、$c，还是生成ABCRoute

三个文件生成了完全重复的路由符号，直接导致命名冲突，触发编译器报错。

至于能不能在扁平文件里用动态分段？可以，但必须避免符号命名冲突。你可以通过调整文件名来让生成的符号名唯一：

1. 给文件名加独特前缀/后缀，比如：
   • 把$a.$b.$c.tsx改成all-dynamic.$a.$b.$c.tsx，生成AllDynamicABCRoute
   • 把a.$b.$c.tsx改成static-a.$b.$c.tsx，生成StaticAABCRoute
   • 把a.b.$c.tsx改成static-ab.$c.tsx，生成StaticAbCRoute
2. 改用嵌套目录结构区分，比如：

-> routes
--> all-dynamic
   --> $a
      --> $b
         --> $c.tsx
--> static-a
   --> $b
      --> $c.tsx
--> static-ab
   --> $c.tsx

这种结构下，生成的路由符号会自动带上父级目录的标识，不会出现冲突。

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