如何使用基于功能的文件夹结构配置 tanstack 路由器

Question

我正在从 React 路由器切换到 tanstack 路由器。

基于文件的路由以及此文件夹结构的使用是目标：

src/
  main.ts
  routes/
    __root.tsx
    feature/
      index.ts
      MyComponent.tsx

在每个组件的 index.ts 文件内，我使用以下几行注册路由：

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

export const Route = createFileRoute('/mycomponent/')({
  component: MyComponent,
})

export default MyComponent

这样做给了我一个错误：

未捕获的语法错误：请求的模块“http://localhost:5173/src/routes/feature/MyComponent.tsx”不提供名为“Route”的导出

我不满意的

当前解决方案是为MyComponent文件添加前缀，使其看起来像这样：

-MyCommponent.tsx

（添加减号） 这样这个文件就被忽略了。

是否有更好的方法使用 tsr.config.json 进行配置？

我想不通。

Answer 1

首先是 Tanstack 路由器。
MyComponent.tsx 中有什么？如果没有与路由相关的内容（我想不是，因为错误表明您没有导出路由），请将其从路由文件夹中移动