路由群組 (Route Groups)

app 目錄中,巢狀資料夾通常會對應至 URL 路徑。然而,您可以將資料夾標記為 路由群組 (Route Group),以防止該資料夾被包含在路由的 URL 路徑中。

這讓您可以將路由區段和專案檔案組織成邏輯群組,而不影響 URL 路徑結構。

路由群組適用於以下情境:

慣例

建立路由群組的方式是將資料夾名稱用括號包住:(資料夾名稱)

範例

組織路由而不影響 URL 路徑

若要組織路由而不影響 URL,可建立群組來將相關路由集中管理。括號中的資料夾名稱會從 URL 中省略(例如 (marketing)(shop))。

使用路由群組組織路由

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

具有多重佈局的路由群組

為特定區段啟用佈局

若要為特定路由啟用佈局,可建立新的路由群組(例如 (shop)),並將共享相同佈局的路由移至該群組中(例如 accountcart)。群組外的路由將不會共用該佈局(例如 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 會觸發完整頁面載入。此情況 適用於多重根佈局。

On this page