RemixJS 2 的路由架構

NestJS 13 推出 app router 架構快一年了，把原本 "資料夾" 和 "檔案" 設定並存的方式，大刀闊斧改成以資料夾為主的路由設定方式。

反之，RemixJS 2 則是轉向以 "檔案" 為主的路由設定方式。如果以中小型網站的角度去看，RemixJS 似乎是比較方便的做法。以下是整理官方文件的說明。

以檔案為基本架構

檔案資料夾結構

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

URL路徑	對應的檔案	Layout (佈局檔)
/	app/routes/_index.tsx	app/root.tsx
/about	app/routes/about.tsx	app/root.tsx
/concerts	app/routes/concerts._index.tsx	app/routes/concerts.tsx
/concerts/trending	app/routes/concerts.trending.tsx	app/routes/concerts.tsx
/concerts/salt-lake-city	app/routes/concerts.$city.tsx	app/routes/concerts.tsx

歸納幾點規則：

1. 根目錄檔案為 _index.tsx
2. 檔案名稱中以點「.」做為分隔的符號，表示路徑的分段。 concerts.trending.tsx 表示 /concerts.trending 路徑。
3. 動態路由使用美金符號為分段開頭，例如上表中的 concerts.$city.tsx。
4. 經過的佈局檔，會由 root.tsx 為最開頭。以 app/routes/concerts.trending.tsx 為例，經過的佈局檔會為 root.tsx 再來才是 concerts.tsx。佈局檔和葉路由檔會分別被編譯為個別的 js 檔以方便動態載入。

下表為更複雜的狀況：

URL路徑	對應的檔案
/address-book/edit/abc	app/routes/address-book.edit.abc.tsx
/address-book/edit/123	app/routes/address-book.edit.$sid.tsx
/address-book/edit/abc/def	app/routes/address-book.edit.abc.def.tsx

以資料夾為架構

也可以使用資料夾為架構，不過只能在 routes 目錄下的第一層，更內層的資料夾就沒有效果了。 資料夾的命名規則同上述的檔案命名規則，而對應的頁面檔案名稱需為 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

自訂路由

一般使用預設路由規則即可，在某些情況下要自訂路由對應可以設定 remix.config.js 檔，請參考官方文件說明。