Vite、React、TypeScript、TanStack Routerの構成でファイルベースルーティングを実装しました。ここでは、TanStack Routerによるファイルベースルーティングの基本的なルールや、今回利用した機能を紹介します。
TanStack Routerでのファイルベースルーティングとは
ファイルベースルーティングは、ファイルシステムの構造に基づいてアプリケーションのルーティングを自動的に生成する手法です。ルーティング設定を明示的に書く必要がなく、ファイルとフォルダの構造だけでアプリケーションの構造を定義できます。
例：src/routes/about.tsx → /aboutルート
ファイルベースルーティングのルール
TanStack Routerのファイルベースルーティングの主なルールは以下の通りです
- ルートファイルは
src/routesディレクトリ内に配置します。 - ファイル名がURLパスに対応します（例：
about.tsx→/about）。 - 動的セグメントは
$プレフィックスを使用します（例：users/$userId.tsx→/users/:userId）。 - インデックスルートは
index.tsxという名前を使用します。 - レイアウトは
_auth.tsxのようにアンダースコアプレフィックスを使用します。 - ルーティングから除外したいディレクトリやファイルには
-プレフィックスを使用します
（例：-components/button.tsx)
基本的な使い方
ルートの定義と自動生成
TanStack Routerの便利な機能として、開発サーバー起動中にファイルを作成するだけでcreateFileRouteが自動生成される点があります。これにより、以下のようなボイラープレートコードを手動で書く必要がなくなります。
// src/routes/index.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({
component: Home,
})
function Home() {
return <div>Welcome to the home page!</div>
}
認証ガードの簡単な実装例
TanStack Routerでは、ファイルシステムの階層構造を利用して認証ガードを実装できます。
// src/routes/_auth.tsx
import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
export const Route = createFileRoute('/_auth')({
beforeLoad: ({ context, location }) => {
// 認証状態のチェック
if (!context.auth.isAuthenticated) {
throw redirect({
to: '/login',
search: { redirect: location.href },
})
}
},
component: Outlet,
})
// src/routes/_auth/dashboard.tsx
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/_auth/dashboard')({
component: Dashboard,
})
function Dashboard() {
return <div>Welcome to your dashboard!</div>
}
認証ガードの仕組みと利点
-
ルートの処理順序:
-
/dashboardへのアクセス時、まず_auth.tsxで認証チェックが行われます。 - 認証後、
_auth/dashboard.tsxの内容が<Outlet />にレンダリングされます。
-
-
構造と利点:
-
_auth.tsxは認証が必要な全ルートの親として機能します。 -
_authディレクトリ下のルートには自動的に認証ガードが適用されます。 - 認証ロジックを一箇所で管理でき、コードの重複を避けられます。
-
この仕組みにより、ファイルシステムの構造がそのままルーティング構造となり、アプリケーションの構造が直感的に理解しやすくなります。
エラーハンドリングの改善
TanStack Routerは、アプリケーション全体のエラーハンドリングを簡単にカスタマイズできるdefaultErrorComponent機能を提供しています。
defaultErrorComponent の活用
-
createRouter関数でdefaultErrorComponentを設定できます。 - これにより、アプリケーション全体で一貫したエラー表示が可能になります。
- React QueryのuseErrorBoundaryなど、他のエラーハンドリング機能との連携も改善されます。
実装例:
const ErrorComponent = () => (
<>
<h1>エラーが発生しました</h1>
<Button onClick={() => window.location.assign(window.location.origin)}>
ホームへ戻る
</Button>
</>
);
// src/main.tsx
const router = createRouter({
routeTree,
defaultErrorComponent: ErrorComponent
});
この設定により、エラー発生時に適切なコンポーネントが表示され、カスタムされたエラー画面を提供できます。また、既存のErrorBoundaryとの競合も解消され、一貫したエラーハンドリングが実現できます。
まとめ
TanStack Routerは、ファイルベースルーティングを行う上で非常に効果的なライブラリです。他にも様々な便利な機能がありもっと有効活用ができるはずなので、どんどん取り入れていきたいと思っています。
参考
Discussion