使用TanStack Router的createFileRoute生成含下划线路径的路由问题

方案1：手动指定路由路径 #

直接绕过文件系统路由的自动生成逻辑，手动创建路由组件并指定目标路径：

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

export const Route = createFileRoute('/__/auth/handler')({
  component: () => {
    // 这里写认证回调的处理逻辑
    return <div>处理认证回调</div>
  },
})

注意不要依赖自动生成的routeTree.gen.ts，或检查框架是否支持禁用该路由的自动生成规则。

方案2：自定义路由生成规则 #

如果使用的是TanStack Router这类支持自定义路由解析的框架，可以在Vite配置中修改路由插件的解析逻辑，保留双下划线路径：

// vite.config.ts
import { tanstackRouterVite } from '@tanstack/router-vite-plugin'

export default {
  plugins: [
    tanstackRouterVite({
      resolveRoutePath: (filePath) => {
        // 针对认证回调路径做特殊处理
        if (filePath.endsWith('__auth_handler.tsx')) {
          return '/__/auth/handler'
        }
        // 其他路径沿用默认解析逻辑
        return filePath
          .replace(/\.tsx?$/, '')
          .replace(/^routes\//, '')
          .replace(/\[([^\]]+)\]/g, ':$1')
      },
    }),
  ],
}

这种方式需要熟悉框架路由插件的API，确保自定义规则不会干扰其他路由的生成。

方案3：用重定向绕过路径限制 #

如果前两种方法不可行，可先创建一个能正常生成的路由（比如/auth/handler），再通过重定向关联目标路径：

• 客户端重定向：在/auth/handler的路由组件中直接处理/__/auth/handler的请求逻辑；
• 服务器端重定向：若为SSR项目，在Vite中间件或服务器配置中添加规则，将/__/auth/handler的请求转发到实际路由。

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