[Note] Tanstack Router

Loader 的使用

loader 這個 async function 會在匹配到對應的 route 是被執行，這裡適合用來載入「重要的資料」。

載入資料（external data loading）

在 loader 載入資料可以避免：

• 不會每次進入頁面是都先顯示「載入中」的 spinner
• 減少 waterfall 式的 data fetching
• 對 SEO 更友善

重要的資料

重要的資料指的是，沒有這個資料前，這個頁面就不應該被 render 出來，通常是和該頁面最有關的資料。

Routing Concepts

路由定義

• Basic Route: '/about'
• Index Route: /posts/
• Dynamic Route Segments: /posts/$postId
  • 可以透過 params 取得 URL 中該部分
• Splat / Catch-All Route: /files/$
  • 類似 *，可以透過 _splat 取得所有 /files/ 後的路徑
• Optional Path Parameters: /posts/{-$category}
  • category 可能存在也可能不存在

使用檔名或資料夾名稱定義

• Layout Routes：當路徑匹配到時會套用的元件或邏輯
• Pathless Layout Routes：即使路徑沒有匹配到也會套用的元件或邏輯，檔案名稱以 _ 作為前綴，例如 _pathlessLayout/
• Non-Nested Routes：在檔名中以 _ 作為後綴，例如，posts_.$postId.edit.tsx
• Excluding Files and Folders from Routes：在檔名或資料夾名中以 - 最為前綴，即會被忽略，例如 /-components/header.tsx
• Pathless Route Group Directories：使用 () 來組織管理路由，它不會實際被處理，例如 (app)/ 或 (auth)/

Layout 類型的檔案

Layout Route

在 directory routes 的情況下，需要使用 route.tsx 來明確說明這個是 layout route：

routes/
├── app/
│   ├── route.tsx    // -> 這個是 layout route，裡面需要放 <Outlet />
│   ├── dashboard.tsx
│   ├── settings.tsx

如果是 flat routes 的話，則可以使用類似 app.tsx 來表示它是 layout route：

routes/
├── app.tsx       // -> 這個是 layout route，裡面需要放 <Outlet />
├── app.dashboard.tsx
├── app.settings.tsx

Pathless Layout

Pathless Layout 的概念是這個資料夾內的檔案都要套用這個 Layout，但不需要匹配到特定的路由。以 directory routes 來說，會是：

routes/
├── _pathlessLayout/   // -> 資料夾名稱使用 _ 開頭，在這個資料內的頁面都會套用 route.tsx 這個 layout
│   ├── route.tsx         // -> 這個是 patheless layout route，裡面需要放 <Outlet />
│   ├── a.tsx    
│   ├── b.tsx

如果是 flat routes 的話，則可以寫成：

routes/
├── _pathlessLayout.tsx   // -> 這個是 patheless layout route，裡面需要放 <Outlet />
├── _pathlessLayout.a.tsx
├── _pathlessLayout.b.tsx