TanStack Routerについてまとめてみた

こんにちは！アドベントカレンダーという良い機会があり、せっかくなので記事を書いてみました。雑な文章だったり、間違いがあるかもしれませんがその場合はご指摘を頂けると幸いです。

はじめに

本記事では、ReactのルーティングライブラリであるTanStackRouterについて自分なりにまとめてみました。詳しく知りたい方は公式ドキュメントや別の方の記事を見てみてください。
https://tanstack.com/router/latest/docs/framework/react/overview

TanStack Routerって？

まず初めにTanStack Routerは前述した通り、Reactのルーティングライブラリです。TanStack RouterはReact-Router-domのようなコードベースルーティングではなく、RemixやNextjsのようなファイルベースルーティングを採用しており、プロジェクトのフォルダ構成に基づき自動的にルーティングを作成してくれます。

補足：React-Router-domにもファイルベースルーティングはありますが、分かりやすかったので例として挙げました

コードベースルーティングの例

Route.tsx

    <Router>
      <div>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/posts" element={<Posts />} />
          <Route path="/posts/:postid" element={<Post />} />
        </Routes>
      </div>
    </Router>

ファイルベースルーティングの例

src/
├── routes/
    ├── index.tsx           // → /
    └── posts/
        ├── index.tsx       // → /posts
        └── $postid/
             └── index.tsx  // → /posts/:postid （動的ルーティング）

TanStack Routerの強力な機能

• 100% inferred TypeScript support
  • Typescriptを100%サポートしているため型が自動的に推論される
• Typesafe navigation
  • ルートに関する型エラーをコンパイル時に検出できる
• Nested Routing and layout routes
  • ネストルートのサポート
  • _layout.tsxを使い、共通のレイアウトを設定できる
• Built-in SWR Caching for loaders
  • ルートごとのpreload機能
  • SWRキャッシュによるキャッシュ管理
• Designed for client-side data caches (TanStack Query, SWR, etc.)
  • クライアント側データのキャッシュ管理
• Automatic route prefetching
  • 遷移先データのprefetch機能
• Asynchronous route elements and error boundaries
  • ルートごとにデータ、コンポーネントを非同期でロード
  • 発生したエラーに対する適切な処理が可能
• File-based Route Generation
  • ファイルベースのルート生成
• Typesafe JSON-first Search Params state management APIs
  • search paramsでJSONに変換可能なデータを使用でき、型安全
• Path and Search Parameter Schema Validation
  • ルートのパスやパラメータに定義したスキーマを使用できる
• Search Param Navigation APIs
  • useSearchParamsでクエリパラメータの管理
  • 状態管理も可能
• Custom Search Param parser/serializer support
  • クエリパラメータを独自のフォーマットでカスタム可能
• Search param middleware
  • クエリパラメータが渡される前に処理を実行できる
• Route matching/loading middleware
  • ルートへの遷移前に処理を実行できる

TanStack Routerのファイル命名規則

TanStackRouterの命名規則として上の例以外にもいくつかあります。

• __root.tsx：routesのルートファイル
  • 記述したものはroutes以下のページ全てに同じレイアウトが表示される
• ○○.lazy.tsx：コンポーネントを遅延して表示させることができるファイル
  • 初期表示の速度が上がるなどパフォーマンスの向上が見込める
• _○○.tsx：レイアウトファイル（アンダースコアのプレフィックスを付ける）
  • 特定のルートまたは、その子ルートに適用できる
  • ルーティングには含まれない
• ○○_.tsx：親ルートから除外されるファイル
  • 独立したルーティングになる
• (フォルダ名)：ルートをグループ化
  • (フォルダ名)自体はルーティングに含まれない
  • 共通するロジックなどをグループ内だけに適用できる
  • 似たような-プレフィックスもある
• .route.tsx：ロード時に読み込まれるファイル

TanStack Routerのディレクトリ構成

以下は公式から引用してきたDirectoryRoutesとFlatRoutesを組み合わせたディレクトリ構成です。両方のRoutesを組み合わせることで余計なファイルやフォルダの追加を避けることができます。

routes/
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _layout.tsx
├── _layout/
│   ├── layout-a.tsx
├── ├── layout-b.tsx

feature-baseなディレクトリ構成にすると以下のようになります。
それぞれのルートで使用する機能ごとに分けることができるので、コードの可読性が良くなるので管理が容易になります。

posts/
├── -components
├── -hooks
├── -types
├── -functions
├── index.tsx
└── $postId
    ├── -components
    ├── -hooks
    ├── -types
    ├── -functions
    └──  index.tsx

まとめ

今回はTanStack Routerの機能などについて軽くまとめてみました!
環境構築などについては紹介しませんでしたが、簡単なので是非やってみてください!