2024年11月22日、React Router v7が正式にリリースされ、Remixと統合されました。これにより、React Routerは従来のルーティングライブラリとしての機能に加え、フレームワークとしての新たな機能も提供するようになりました。
目次
非破壊的アップグレード
React Router v7へのアップグレードは非破壊的であり、v6で使用していたコードはそのまま動作します。これにより、既存のプロジェクトでも安心して移行が可能です。
React 19への橋渡し
新たなバンドル、サーバーレンダリング、プリレンダリング、ストリーミング機能により、React 18から19への移行を段階的に進めることができます。これらの機能は、最新のReact機能を活用するための基盤を提供します。
型の安全性の向上
新しいtypegenにより、ルートパラメータ、ローダーデータ、アクションなどに対して、より強力な型安全性が提供されます。これにより、開発時のエラーを減少させ、コードの信頼性が向上します。
型安全なルートパラメータ
// app/routes.ts
import {
type RouteConfig,
route,
} from "@react-router/dev/routes";
export default [
route("products/:id", "./routes/product.tsx"),
] satisfies RouteConfig;import type { Route } from "./+types/product";
export function loader({ params }: Route.LoaderArgs) {
// 👆 { id: string }
return { planet: `world #${params.id}` };
}
export default function Component({
loaderData, // 👈 { planet: string }
}: Route.ComponentProps) {
return <h1>Hello, {loaderData.planet}!</h1>;
}フレームワークとしてのReact Router
Remixとの統合により、React Routerはフレームワークとして進化しました。以下のような機能を利用できます。
- Viteバンドラーと開発サーバーの統合: 迅速な開発環境をサポートします。
- モジュールの即時適用（HMR）: コードの変更を即座に反映させ、生産性を向上させます。
- コード分割: 必要なコードだけを読み込むことで、パフォーマンスを最適化します。
- 型安全性を考慮したルート定義: 明確で安全なルーティングを可能にします。
- ファイルシステムまたは設定に基づくルーティング: 柔軟なルーティング設定が可能です。
- データ読み込みとアクションの型安全性: データの取得と操作がより安全に行えます。
- アクション後のページデータの自動再検証: データの一貫性を自動的に保ちます。
- SSR、SPA、静的レンダリングの戦略: 多様なレンダリング手法をサポートします。
- 保留状態と楽観的UIのためのAPI: ユーザーエクスペリエンスを向上させるためのAPIを提供します。
- デプロイメントアダプタ: さまざまな環境へのデプロイを容易にします。
公式ドキュメント(日本語)
日本語の公式ドキュメントも用意されております。
ぜひ実際に動かしながら新機能を試してみましょう。
おわりに
React Router v7は、従来の使いやすさを保ちながら、最新のフレームワーク機能を取り入れた革新的なアップデートです。
型安全性や柔軟なデータ管理、効率的なルーティングを活用することで、より洗練されたアプリケーション開発が可能になります。ぜひ試して、あなたのプロジェクトを次のレベルへ進化させましょう！
