tanstack-router は何をしますか？
ReactおよびSolidアプリケーション向けの型安全なルーティング。最優先の検索パラメータ、データローディング、Reactエコシステムとのシームレスな統合を提供します。
概要
TanStack Routerは、TypeScriptの型安全性を最大限に活用したルーティングライブラリです。宣言的なルート定義、自動的な型推論、そして強力なデータローディング機能を備えています。
主な機能
- 型安全なルーティング: ルートパラメータ、検索パラメータ、状態がすべてTypeScriptで型付けされます。
- データローディング: ルートごとに非同期データをロードするための
loader機能。 - 検索パラメータ: 第一級のサポートにより、URLのクエリ文字列を簡単に管理。
- React / Solid対応: 両方のフレームワークで同じAPIを提供。
クイックスタート
npm install @tanstack/react-router
または
npm install @tanstack/solid-router
基本的な使い方
import { createRouter, RouterProvider, Route } from '@tanstack/react-router'
const rootRoute = new Route({ getParentRoute: () => {}, path: '/' })
const indexRoute = new Route({
getParentRoute: () => rootRoute,
path: '/',
component: () => <h1>ホーム</h1>,
})
const routeTree = rootRoute.addChildren([indexRoute])
const router = createRouter({ routeTree })
declare module '@tanstack/react-router' {
interface Register {
router: typeof router
}
}
const App = () => <RouterProvider router={router} />