はじめに
以前、Remixについて紹介しました。
今回はReact Router v7について紹介させていただきます。React Routerは、Reactを使用したアプリケーションにおいて、ルーティングを管理するためのライブラリです。
このReact Routerですが、2024年11月にReact Router v7がリリースされました。
React Router v7の主要なモード
React Router v7では主に3つのモードが提供されます。
- Declarative Mode
- Data Mode
- Framework Mode
Declarative Mode
Declarative Modeは、URLをコンポーネントにマッチングさせたり、アプリ内をナビゲートしたり、<Link>、useNavigate、useLocationなどのAPIを使用してアクティブな状態を提供する、React Router v6までのルーティング方法を踏襲したモードです。
Data Mode
Data Modeは、ルーティングに加えて、loader、action、useFetcherなどのAPIを使用して、データローディング、アクション、保留状態の管理などを実行するモードです。Data Modeを使用することで単なるクライアントサイドのルーティングライブラリから、より高度なデータ管理や状態管理を含む、フルスタックアプリケーションの基盤として機能します。
Framework Mode
React Router v7では、今まで通りのシンプルで宣言的なルーティングライブラリとして利用することもできますが、Remixと統合したことで、フレームワークとしても利用することが可能となりました。それがFramework Modeです。
Remixと統合されたことでRemixの特徴を引き継いでおり、Web標準に準拠した設計思想のフレームワークとなっています。
React Router v7の特徴と強み
細かい点を挙げるとキリがないですが、特に大きな点としてReact Router v7では以下のような特徴と強みがあります。
- Web標準に準拠したフレームワーク
- CSRに加えて、SSRやSSGのレンダリングが可能
- 型の安全性を考慮したデータローディングとアクション
- ファイルベースまたはコンフィグベースのルーティング
まとめ
いかがでしたでしょうか。魅力的な機能や特徴がたくさんありますし、さらにそれらの組み合わせでハイブリッドな構成も可能になり、開発の自由度も向上しています。
Reactのフレームワークを選択する上ではNext.jsが利用されることが多いと感じていますが、React Router v7のフレームワークモードの登場はNext.jsの対抗馬となるくらいの選択肢になるのではないでしょうか。ぜひ、この機会に皆さまもReact Router v7を活用してみてください。
