路由群組 (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