Vite + TanStack Router - 1. セットアップ
[vite]
[TanStack]
[TanStack Router]
TanStack RouterはTanStack Query(a.k.a. React Query) の開発元が作ったルーティングライブラリです。
ファイルベースの直感的なルート作成、自動コード分割、データローダー、TypeScript対応といった特徴があります。 また、先ごろベータ版が公開されたメタフレームワークTanStack Startのベースにもなっています。
今回から数回にわけて今注目のルーティングライブラリTanStack Routerの勘所を紹介します。
初回はセットアップの仕方です。
その後まずはルーティングライブラリの基本
- 各種ルートの作成
- リンクの作成、ページ遷移の方法
- パラメータの取り扱い
をおさえ、次に以下に挙げるTanStack Routerの便利な機能を紹介していきます。
- コード分割
- データローダー
- RouterContext
- DevTools
セットアップ
- viteでプロジェクト初期化
npm create vite@latest- TanStack Routerをインストール
npm i @tanstack/react-router; npm i -D @tanstack/router-plugin @tanstack/router-devtools @tanstack/eslint-plugin-routervite.config.tsにプラグインの設定を追加
import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
// https://vite.dev/config/export default defineConfig({ plugins: [ react(), TanStackRouterVite() ],});npm run devを実行 ← ここ重要src/routes/__root.tsxファイルを作成すると、自動でファイルに以下の内容が書き込まれます
import * as React from 'react'import { Outlet, createRootRoute } from '@tanstack/react-router'
export const Route = createRootRoute({ component: RootComponent,})
function RootComponent() { return ( <React.Fragment> <div>Hello "__root"!</div> <Outlet /> </React.Fragment> )}<Outlet /> コンポーネントがあるところに他のルートが表示されます。
<Outlet /> コンポーネントは __root.tsx 以外のどのファイルでも使えます。
また、ルートの component プロパティを指定しないと、自動で <Outlet /> が指定されたことになります。
App.tsxでRouterを読み込み
import "./App.css";import { RouterProvider, createRouter } from "@tanstack/react-router";import { routeTree } from "./routeTree.gen"; // 自動生成されるファイル
const router = createRouter({ routeTree });
declare module "@tanstack/react-router" { interface Register { router: typeof router; }}
function App() { return ( <> <RouterProvider router={router} /> </> );}
export default App;src/routes/index.tsxを作成すると、自動で以下の内容が書き込まれます。
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/')({ component: RouteComponent,})
function RouteComponent() { return <div>Hello "/"!</div>}http://localhost:5173にアクセスすると__root.tsxとroutes/index.tsxの内容が表示されます。
以上でTanStack Routerをセットアップし、最初のルートを表示することができました。
まとめ
routes/ディレクトリ以下に置いたファイルがルートになるrouteTree.gen.tsファイルは自動生成されるので自分では作成・編集しないroutes/__root.tsxファイルがすべてのルートの根本になる。全ページで共通のレイアウトを採用する場合はここにレイアウトを書ける<Outlet />コンポーネントが各ルートに置き換わる