路由群組 (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
會觸發完整頁面載入。此情況 僅 適用於多重根佈局。