如何通过tsr.config.json配置TanStack Router文件路由，避免组件文件误识别

我正从React Router切换到TanStack Router，想实现文件路由，采用的文件夹结构如下：

src/
  main.ts
  pages/
    __root.tsx
    home/
      index.ts
      Home.tsx
      Home.styled.ts

已将路由目录重命名为pages，并修改配置生效：

"routesDirectory": "./src/pages"

每个页面目录下的index.ts用来注册路由，代码如下：

import { createFileRoute } from '@tanstack/react-router'
import { Home } from './Home.tsx'

export const Route = createFileRoute('/home/')({
  component: Home,
})

export default Home

现在遇到错误：

Uncaught SyntaxError: The requested module '.../src/pages/home/Home.tsx' doesn't provide an export named: 'Route'

我不想让Home.tsx这类页面组件文件被路由识别，路由注册逻辑已经放在index.ts里了。目前临时方案是给组件文件加前缀改成-Home.tsx让它被忽略，但我不满意这个方法，想知道能不能通过tsr.config.json来配置实现？

可以通过tsr.config.json的exclude选项精准控制哪些文件会被TanStack Router的文件路由系统忽略，不需要给组件文件加特殊前缀。

通用配置方案 #

在项目根目录的tsr.config.json中添加如下配置：

{
  "routesDirectory": "./src/pages",
  "exclude": [
    "**/*.tsx",
    "!**/__root.tsx",
    "!**/index.ts"
  ]
}

配置说明：

• **/*.tsx：先匹配所有.tsx文件，将它们排除在路由识别范围外
• !**/__root.tsx：重新将根路由文件__root.tsx纳入识别范围
• !**/index.ts：重新将所有目录下用来注册路由的index.ts纳入识别范围

这样配置后，TanStack Router只会处理__root.tsx和各页面目录下的index.ts，其他.tsx组件文件（比如Home.tsx）会被自动忽略，完全符合需求。

更精准的匹配方案（可选） #

如果你的组件文件命名有规律（比如都是以大写字母开头的[ComponentName].tsx），也可以用更精准的规则：

{
  "routesDirectory": "./src/pages",
  "exclude": [
    "**/[A-Z]*.tsx",
    "!**/__root.tsx"
  ]
}

这个规则会排除所有以大写字母开头的.tsx文件，同时保留根路由文件。

内容的提问来源于stack exchange，提问作者Type-Style