跳至內容
建置您的應用程式路由路由群組

路由群組

在 app 目錄中，巢狀資料夾通常會映射到網址路徑。然而，您可以將資料夾標記為**路由群組**，以防止該資料夾被包含在路由的網址路徑中。

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

路由群組適用於：

慣例

您可以透過將資料夾名稱用括號括起來來建立路由群組：(folderName)

範例

在不影響網址路徑的情況下組織路由

要在不影響網址的情況下組織路由，請建立一個群組來將相關路由放在一起。括號中的資料夾將會從網址中省略（例如 (marketing) 或 (shop)）。

Organizing Routes with Route Groups

即使 (marketing) 和 (shop) 內的路由共用相同的網址階層，您仍然可以透過在它們的資料夾內新增 layout.js 檔案，為每個群組建立不同的佈局。

Route Groups with Multiple Layouts

選擇特定區段套用版面配置

要將特定路由套用至版面配置，請建立新的路由群組（例如 (shop)），然後將共用相同版面配置的路由移至該群組（例如 account 和 cart）。群組外的路由將不會共用該版面配置（例如 checkout）。

Route Groups with Opt-in Layouts

選擇在特定路由上載入骨架畫面

要透過 loading.js 檔案將載入骨架畫面套用至特定路由，請建立新的路由群組（例如 /(overview)），然後將 loading.tsx 移至該路由群組內。

Folder structure showing a loading.tsx and a page.tsx inside the route group

現在，loading.tsx 檔案將只套用至您的儀表板 → 總覽頁面，而不是所有儀表板頁面，且不會影響 URL 路徑結構。

建立多個根版面配置 根版面配置，請移除最上層的 layout.js 檔案，並在每個路由群組內新增一個 layout.js 檔案。這對於將應用程式劃分為具有完全不同 UI 或體驗的區段非常有用。每個根版面配置都需要加入 <html> 和 <body> 標籤。

Route Groups with Multiple Root Layouts

在上面的範例中，(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 將會導致整頁重新載入。這僅適用於多個根版面配置的情況。