TanStack Router 文件命名约定

基于文件的路由要求你遵循一些简单的文件命名约定,以确保正确生成路由。这些约定所启用的概念在 路由树与嵌套 指南中有详细介绍。

特性 (Feature) 描述 (Description)
__root.tsx 根路由文件必须命名为 __root.tsx,并且必须放置在配置的 routesDirectory 的根目录下。
. 分隔符 路由可以使用 . 字符来表示嵌套路由。例如,blog.post 将生成为 blog 的子路由。
$ 标记 带有 $ 标记的路由片段是参数化的,并将从 URL 路径名中提取值作为路由 param(参数)。
_ 前缀 带有 _ 前缀的路由片段被视为无路径布局路由,在将子路由与 URL 路径名匹配时不会使用它。
_ 后缀 带有 _ 后缀的路由片段将该路由排除在任何父路由的嵌套之外(即非嵌套路由)。
- 前缀 带有 - 前缀的文件和文件夹将从路由树中排除 。它们不会被添加到 routeTree.gen.ts 文件中,可用于在路由文件夹中共存逻辑代码。
(folder) 文件夹名模式 匹配此模式的文件夹被视为路由组,防止该文件夹包含在路由的 URL 路径中。
[x] 转义 方括号用于转义文件名中具有路由含义的特殊字符。例如,script[.]js.tsx 变为 /script.jsapi[.]v1.tsx 变为 /api.v1
index 标记 index 标记结尾(在任何文件扩展名之前)的路由片段,当 URL 路径名精确匹配父路由时,将匹配父路由。这可以通过 indexToken 配置选项进行配置,参见 [suspicious link removed]。
.route.tsx 文件类型 当使用目录组织路由时,route 后缀可用于在目录路径处创建路由文件。例如,blog.post.route.tsxblog/post/route.tsx 可用作 /blog/post 路由的路由文件。这可以通过 routeToken 配置选项进行配置,参见 [suspicious link removed]。

💡 记住: 项目的文件命名约定可能会受到所配置的 [suspicious link removed] 的影响。

!NOTE

要转义尾随下划线(例如 /posts[_].tsx),需要使用升级后的 非嵌套路由。

动态路径参数 (Dynamic Path Params)

动态路径参数可用于扁平路由和目录路由,以创建可以匹配 URL 路径动态片段的路由。动态路径参数由文件名中的 $ 字符表示:

文件名 (Filename) 路由路径 (Route Path) 组件输出 (Component Output)
... ... ...
ʦ posts.$postId.tsx /posts/$postId <Root><Posts><Post>

我们将在 路径参数 指南中了解更多关于动态路径参数的信息。

无路径路由 (Pathless Routes)

无路径路由用逻辑或组件包裹子路由,而不需要 URL 路径。无路径路由由文件名中的 _ 字符表示:

文件名 (Filename) 路由路径 (Route Path) 组件输出 (Component Output)
ʦ _app.tsx
ʦ _app.a.tsx /a <Root><App><A>
ʦ _app.b.tsx /b <Root><App><B>

要了解更多关于无路径路由的信息,请参阅 路由概念 - 无路径路由 指南。

相关推荐
iFlow_AI1 小时前
知识驱动开发:用iFlow工作流构建本地知识库
前端·ai·rag·mcp·iflow·iflow cli·iflowcli
打工人小夏1 小时前
vue3使用transition组件,实现过度动画
前端·vue.js·前端框架·css3
LFly_ice2 小时前
Next-1-启动!
开发语言·前端·javascript
小时前端2 小时前
谁说 AI 历史会话必须存后端?IndexedDB方案完美翻盘
前端·agent·indexeddb
wordbaby2 小时前
TanStack Router 基于文件的路由
前端
wordbaby2 小时前
TanStack Router 路由概念
前端
wordbaby2 小时前
TanStack Router 路由匹配
前端
cc蒲公英2 小时前
vue nextTick和setTimeout区别
前端·javascript·vue.js
程序员刘禹锡2 小时前
Html中常用的块标签!!!12.16日
前端·html