路由配置

Remix 路由系統的一個基本概念是使用巢狀路由，這種方法可以追溯到 Ember.js。透過巢狀路由，URL 的片段會與資料依賴性和 UI 的元件階層結構耦合。像 /sales/invoices/102000 這樣的 URL 不僅揭示了應用程式中的清晰路徑，還描繪了不同元件的關係和依賴性。

模組化設計

巢狀路由透過將 URL 分割成多個部分來提供清晰度。每個部分都直接與特定的資料需求和元件相關。例如，在 URL /sales/invoices/102000 中，每個部分 - sales、invoices 和 102000 - 都可以與特定的資料點和 UI 區段關聯，使其在程式碼庫中易於管理。

巢狀路由的一個特點是，巢狀路由樹中的多個路由能夠匹配單一 URL。這種粒度確保每個路由都主要專注於其特定的 URL 片段和相關的 UI 切片。這種方法提倡模組化和關注點分離的原則，確保每個路由都專注於其核心職責。

平行載入

在某些 Web 應用程式中，資料和資產的循序載入有時會導致人為的緩慢使用者體驗。即使資料依賴性不是相互依賴的，它們也可能會循序載入，因為它們與渲染階層結構耦合，從而產生不必要的請求鏈。

Remix 利用其巢狀路由系統來最佳化載入時間。當 URL 匹配多個路由時，Remix 將會平行載入所有匹配路由所需的資料和資產。透過這樣做，Remix 有效地避開了傳統的鏈式請求序列的陷阱。

這種策略與現代瀏覽器有效處理多個並行請求的能力相結合，使 Remix 成為提供高度響應和快速 Web 應用程式的領先者。這不僅僅是讓您的資料擷取快速，而是以有組織的方式擷取資料，為最終使用者提供最佳體驗。

慣例路由配置

Remix 引入了一個關鍵慣例來幫助簡化路由過程：app/routes 資料夾。當開發人員在這個資料夾中引入檔案時，Remix 會將其視為路由。此慣例簡化了定義路由、將其與 URL 關聯以及呈現相關元件的過程。

以下是使用 routes 資料夾慣例的範例目錄

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── concerts._index.tsx
│   ├── concerts.$city.tsx
│   ├── concerts.trending.tsx
│   └── concerts.tsx
└── root.tsx

所有以 app/routes/concerts. 開頭的路由都將是 app/routes/concerts.tsx 的子路由。

慣例路由資料夾

對於需要額外模組或資產的路由，可以使用 app/routes 內含有 route.tsx 檔案的資料夾。此方法

• 共同配置模組：它收集與特定路由相關的所有元素，確保邏輯、樣式和元件緊密結合。
• 簡化導入：由於相關模組位於一處，因此管理導入變得簡單，從而提高了程式碼的可維護性。
• 方便自動程式碼組織：使用 route.tsx 設定，本質上能促進程式碼庫的良好組織，這在應用程式擴展時非常有益。

上述相同的路由也可以像這樣組織

app/
├── routes/
│   ├── _index/
│   │   ├── signup-form.tsx
│   │   └── route.tsx
│   ├── about/
│   │   ├── header.tsx
│   │   └── route.tsx
│   ├── concerts/
│   │   ├── favorites-cookie.ts
│   │   └── route.tsx
│   ├── concerts.$city/
│   │   └── route.tsx
│   ├── concerts._index/
│   │   ├── featured.tsx
│   │   └── route.tsx
│   └── concerts.trending/
│       ├── card.tsx
│       ├── route.tsx
│       └── sponsored.tsx
└── root.tsx

您可以在 路由檔案慣例 參考資料中，閱讀更多關於檔案名稱中的特定模式和其他功能的資訊。

只有直接位於 app/routes 下的資料夾會被註冊為路由。深度巢狀的資料夾會被忽略。 位於 app/routes/about/header/route.tsx 的檔案將不會建立路由。

app/
├── routes/
│   └── about/
│       ├── header/
│       │   └── route.tsx
│       └── route.tsx
└── root.tsx

手動路由設定

雖然 app/routes 資料夾為開發人員提供了一個方便的慣例，但 Remix 理解 一種尺寸並不適合所有人。 有時，提供的慣例可能不符合特定的專案需求或開發人員的偏好。 在這種情況下，Remix 允許透過 vite.config.ts 進行手動路由設定。 這種彈性確保開發人員可以按照對其專案有意義的方式來組織其應用程式。

如果您尚未遷移到 Vite 並且仍在使用 經典 Remix 編譯器，您可以在您的 remix.config.js 檔案中手動設定路由。

一種常見的應用程式結構方式是使用頂層的功能資料夾。 考慮到與特定主題（如音樂會）相關的路由，可能共享多個模組。 將它們組織在一個資料夾下是有意義的。

app/
├── about/
│   └── route.tsx
├── concerts/
│   ├── card.tsx
│   ├── city.tsx
│   ├── favorites-cookie.ts
│   ├── home.tsx
│   ├── layout.tsx
│   ├── sponsored.tsx
│   └── trending.tsx
├── home/
│   ├── header.tsx
│   └── route.tsx
└── root.tsx

要將此結構配置為與先前範例相同的 URL，您可以使用 vite.config.ts 中的 routes 函式

import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    remix({
      routes(defineRoutes) {
        return defineRoutes((route) => {
          route("/", "home/route.tsx", { index: true });
          route("about", "about/route.tsx");
          route("concerts", "concerts/layout.tsx", () => {
            route("", "concerts/home.tsx", { index: true });
            route("trending", "concerts/trending.tsx");
            route(":city", "concerts/city.tsx");
          });
        });
      },
    }),
  ],
});

Remix 的路由配置方法融合了慣例和彈性。 您可以使用 app/routes 資料夾來輕鬆、有組織地設定您的路由。 如果您想要更多控制權、不喜歡檔案名稱或有獨特的需求，可以使用 vite.config.ts。 預期許多應用程式會放棄使用路由資料夾慣例，而選擇使用 vite.config.ts。