路由群組 (Route Groups)
在 app
目錄中,巢狀資料夾通常會對應到 URL 路徑。然而,您可以將資料夾標記為路由群組 (Route Group),來避免該資料夾被包含在路由的 URL 路徑中。
這讓您能將路由區段和專案檔案組織成邏輯群組,而不影響 URL 路徑結構。
路由群組適用於以下情境:
- 將路由分組組織,例如依網站區塊、功能意圖或團隊分類
- 在相同路由區段層級中啟用巢狀佈局 (nested layouts):
命名慣例
透過將資料夾名稱用括號包裹來建立路由群組:(資料夾名稱)
範例
組織路由而不影響 URL 路徑
要組織路由而不影響 URL,可建立群組來將相關路由集中管理。括號中的資料夾名稱會從 URL 中省略(例如 (marketing)
或 (shop)
)。

即使 (marketing)
和 (shop)
內的路由共享相同的 URL 層級結構,您仍可透過在各自資料夾內添加 layout.js
檔案,為每個群組建立不同的佈局。

為特定區段啟用佈局
要讓特定路由套用佈局,可建立新的路由群組(例如 (shop)
),並將共享相同佈局的路由移入該群組(例如 account
和 cart
)。群組外的路由將不會套用此佈局(例如 checkout
)。

建立多重根佈局
要建立多個根佈局 (root layouts),需移除頂層的 layout.js
檔案,並在每個路由群組內添加 layout.js
檔案。這適用於將應用程式劃分為具有完全不同 UI 或體驗的區塊。每個根佈局都需包含 <html>
和 <body>
標籤。

在上例中,(marketing)
和 (shop)
都擁有自己的根佈局。
須知事項:
- 路由群組的命名僅用於組織目的,沒有特殊意義,也不會影響 URL 路徑
- 包含路由群組的路由不應解析為與其他路由相同的 URL 路徑。例如,由於路由群組不影響 URL 結構,
(marketing)/about/page.js
和(shop)/about/page.js
都會解析到/about
並導致錯誤- 若您使用多重根佈局且沒有頂層
layout.js
檔案,您的首頁page.js
檔案應定義在其中一個路由群組內,例如:app/(marketing)/page.js
- 跨越多重根佈局的導航會觸發整頁載入(而非客戶端導航)。例如,從使用
app/(shop)/layout.js
的/cart
導航到使用app/(marketing)/layout.js
的/blog
會觸發整頁載入。此情況僅適用於多重根佈局