基於檔案的路由要求您遵循一些簡單的檔案命名慣例,以確保路由能正確生成。這些慣例所實現的概念在路由樹與嵌套 (Route Trees & Nesting)指南中有詳細說明。
功能 | 說明 |
---|---|
__root.tsx | 根路由檔案必須命名為 __root.tsx,且必須放置在設定的 routesDirectory 根目錄中。 |
. 分隔符 | 路由可以使用 . 字元表示嵌套路由。例如,blog.post 將被生成為 blog 的子路由。 |
$ 標記 | 帶有 $ 標記的路由段會被參數化,並從 URL 路徑名中提取值作為路由 param。 |
_ 前綴 | 帶有 _ 前綴的路由段被視為無路徑的布局路由 (pathless layout routes),在匹配其子路由與 URL 路徑名時不會被使用。 |
_ 後綴 | 帶有 _ 後綴的路由段會排除該路由嵌套在任何父路由之下。 |
- 前綴 | 帶有 - 前綴的檔案和資料夾會被排除在路由樹外。它們不會被添加到 routeTree.gen.ts 檔案中,可用於在路由資料夾中共置邏輯。 |
(folder) 資料夾名稱模式 | 符合此模式的資料夾會被視為路由群組 (route group),防止該資料夾被包含在路由的 URL 路徑中。 |
index 標記 | 以 index 標記結尾的路由段(在任何副檔名之前)會在 URL 路徑名完全匹配父路由時匹配父路由。這可以透過 indexToken 配置選項進行設定,詳見選項。 |
.route.tsx 檔案類型 | 使用目錄組織路由時,可以使用 route 後綴在目錄路徑上建立路由檔案。例如,blog.post.route.tsx 或 blog/post/route.tsx 可用於 /blog/post 路由的路由檔案。這可以透過 routeToken 配置選項進行設定,詳見選項。 |
💡 提醒: 專案的檔案命名慣例可能會受到選項配置的影響。
動態路徑參數可用於扁平路由和目錄路由中,以建立能匹配 URL 路徑動態片段的路由。動態路徑參數在檔案名稱中以 $ 字元表示:
檔案名稱 | 路由路徑 | 元件輸出 |
---|---|---|
... | ... | ... |
posts.$postId.tsx | /posts/$postId | <Root><Posts><Post> |
我們將在路徑參數 (Path Params) 指南中進一步了解動態路徑參數。
無路徑路由透過邏輯或元件包裹子路由,而不需要 URL 路徑。非路徑路由在檔案名稱中以 _ 字元表示:
檔案名稱 | 路由路徑 | 元件輸出 |
---|---|---|
_app.tsx | ||
_app.a.tsx | /a | <Root><App><A> |
_app.b.tsx | /b | <Root><App><B> |
要了解更多關於無路徑路由的資訊,請參閱路由概念 - 無路徑路由 (Routing Concepts - Pathless Routes) 指南。
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.