はじめに
React Routerは、Reactアプリケーションでルーティングを管理するためのライブラリです。
React自体は単体でルーティング機能を持たないため、React Routerを使用してページ間の移動やURL管理を実現します。
今回の記事では、ReactとReact Routerの違いを整理しながら解説していきます。
書こうと思ったきっかけ
Reactを使ったアプリケーション開発を進める中で、ルーティングの仕組みが必要になりました。
しかし、ReactとReact Routerの違いを明確に理解できていなかったため、調べながら学んだ内容をまとめることにしました。
なお、本記事は個人的な備忘録としてまとめたものです。その点をご理解いただければ幸いです。
Qiitaでスクラップしてみた
タイトル：React Routerのルーティング実装
React単体にはルーティング機能はないので、いい感じにルーティングを作ってくれるものという認識で最初は大丈夫。
タイトル：2022年中にreact-router-domの理解を深めたい
Reactで作成したSPAに、UIとURLを紐づけるためのものです。
http://localhost:3000/top にアクセス -> Topコンポーネントを返す
http://localhost:3000/todo にアクセス -> Todoコンポーネントを返すといった事ができます。
タイトル：【図解解説/初心者OK】Next.js不要？進化したReact Routerで技術記事アプリを作るチュートリアル【TypeScript/TailwindCSS】
Reactでサーバーでの処理ができるとなると「React + React Router」と「React + Remix + React Router」で実現できることの差がなくなりました。
自分なりに体系的にまとめてみた
React
-
概要
React は、ユーザーインターフェース (UI) を構築するためのライブラリです。コンポーネントをベースにしており、再利用可能で効率的な UI 開発を可能にします。 -
特徴
- 宣言的なコードスタイルで、UI の状態を管理しやすい。
- 状態（state）やプロパティ（props）を活用して、動的に UI を更新。
- シングルページアプリケーション（SPA）の基盤を提供。
- ルーティング機能は含まれていない（ルーティングは他のライブラリを使用する必要がある）。
-
用途
- コンポーネントを使って UI を構築し、動的なデータや状態を管理する。
React Router
-
概要
React Router は、React アプリケーションにルーティング（ページの遷移や URL の管理）機能を追加するためのライブラリです。React を拡張して、シングルページアプリケーションでページ遷移のような動作を実現します。 -
特徴
- 動的ルーティングをサポート。
- URL パラメーター、クエリ文字列、履歴（history）管理が可能。
- ネストされたルートやレイアウトの定義が簡単。
- 宣言的にルーティング設定を記述できる。
-
用途
- ページ遷移の管理（URL に応じたコンポーネントの切り替え）。
- SPA で異なるビューを実現する。
- ブラウザの「戻る」「進む」ボタンのサポート。
React と React Router の違い
| 項目 | React | React Router |
|---|---|---|
| 役割 | ユーザーインターフェース (UI) の構築 | ルーティング機能の提供 |
| 主な機能 | コンポーネント、状態管理 | URL 管理、ページ遷移 |
| 内蔵のルーティング機能 | なし | あり |
| 主な用途 | ユーザーインターフェースの構築 | ページ遷移やビューの切り替え |
| 宣言的な書き方 | UI レイアウトとロジックの記述 | ルートとコンポーネントのマッピング |
React と React Router の使い分け
-
React のみを使う場合
- 単一ページのシンプルなアプリケーションや、ルーティングが不要な場合に使用。
- 例: 単純なフォーム、動的なデータ表示を伴わない UI、モバイルアプリの一部のコンポーネント。
-
React + React Router を使う場合
- 複数のページやビューを持つアプリケーション（例えば、ホームページ、詳細ページなど）が必要な場合に使用。
- React Router を使うことで、React アプリケーションに複雑なナビゲーション機能を簡単に追加できます。
- 例: Eコマースサイト、ブログ、ダッシュボード付きのウェブアプリ。
まとめ
最後までお読みいただき、ありがとうございました。
今回は基礎的な内容ではありますが、React と React Router の違いについて自分なりに整理し、言語化することで理解を深めることができました。
これからも、このような基本的な内容を丁寧にまとめ、知識を定着させていきたいと思います。