Vite + TanStack Router - 2. パスとルートの割り当て

[vite]

[TanStack]

[TanStack Router]

ルートの追加は src/routes 以下にファイルを追加することで行います。

npm run dev で開発サーバーが立ち上がっていれば、src/routes 以下にファイルを新規作成すると自動でテンプレートが書き込まれます、便利。

パス区切りの方法

パス区切りにはディレクトリとドットの2つの方法が使えます。

例えばロケーションバーのURLが http://localhost:5173/hoge/fuga のときに表示されるルートは以下の2つの方法で定義できます。

通常はディレクトリ区切りを使い、同じルートで一部表示が変わる場合(src/routes/hoge.modal.tsx)や同じルートの別操作をする場合(src/routes/hoge.edit.tsx)などにドットを使うと良いと思います。

ルートの種類

ルートの種類はたくさんありますが、以下の4つをおさえておけばひとまずコードを書き始められます。その他は必要な場面に遭遇したら改めてドキュメントを読むで良いと思います。

インデックスルート

ダイナミックルート

キャッチオールルート

パスレスルート

ネスト解除ルート

無視されるルート

Not Foundルート

APIルート

バーチャルファイルルート

ディレクトリを()で囲むとパスとしては認識されなくなる

まとめ

Vite + TanStack Router - 1. セットアップ
メモ:二流のプログラマのためのRust