ReactでSPA構築: react-router-domの基本的な使い方
ReactでSPA（シングルページアプリケーション）を作るとき、ほぼ必須になるのがreact-router-domです。
今回は基本的な使い方から、AppLayoutを使った共通レイアウトの作成方法までまとめていきます。
1. react-router-domとは？
react-router-dom は React用のルーティングライブラリ です。
「ルーティング」とは、URLに応じてどのコンポーネントを表示するかを切り替える仕組みのこと。
Reactは単一ページ（SPA）なので、ページ遷移に見えても実際はコンポーネントの切り替えで画面を更新しています。その切り替えを管理してくれるのが react-router-dom です。
2.インストール方法
npm i react-router-dom
3.よく使うコンポーネント・フック
| コンポーネント/フック | 役割 |
|---|---|
BrowserRouter |
履歴管理付きのルーター。普通のWebアプリはこれを使う |
Routes |
ルート定義をまとめる |
Route |
URLパスとコンポーネントを紐付け |
Link |
アプリ内リンク（<a>タグ代わり） |
Outlet |
ネストされたルートの表示位置 |
Navigate |
コードからページ遷移（リダイレクト） |
useParams |
URLパラメータ取得 |
useNavigate |
ページ遷移用の関数取得 |
4.ルーティング例
<Route index>は「親ルートにアクセスしたときのデフォルトの子ルート」を設定するための属性です。
上記の例では
/にアクセスすると自動的に<Home />が表示される/reportにアクセスすると<Report />が表示される
という動きになります。
5.共通レイアウトを作るAppLayout
ルーティング例を見ていただくと、AppLayoutコンポーネントが親ルートとしてあり、Homeコンポーネント、ReportコンポーネントがAppLayoutコンポーネントの子ルートとして配置されています。
なぜAppLayoutを用意するのか？
- ヘッダーやフッターなど全ページ共通UIをまとめて管理できる
<Outlet />で子ルートの表示位置を制御できる- 認証チェックやエラーハンドリングを一括で適用できる
コードの動き
<Outlet />の場所に子ルートのコンポーネントが差し込まれる/→<Home />、/report→<Report />が表示される- AppLayoutコンポーネントにヘッダーやナビゲーションを書けば常に共通で表示される
6.シングルページアプリケーション（SPA）とは
Single Page Applicationの略で、最初に読み込むHTMLは1枚だけで、ページ遷移はJavaScriptで中身だけ差し替える仕組みのWebアプリのことです。
MPA（Multi Page Application）との違い
| 特徴 | SPA | MPA |
|---|---|---|
| HTML読み込み | 最初の1回のみ | ページごとに読み込み |
| ページ切り替え | JSで中身だけ切り替え | ページ全体を再読み込み |
| 表示速度 | 高速 | 遅め |
| SEO | 対策が必要 | 標準で有利 |
Reactでページ切り替えを行うには、react-router-domなどのルーターライブラリを用いることで実現します。
7.まとめ
react-router-domはReactでのページ切り替えを管理するライブラリBrowserRouter、Routes、Routeが基本- 共通UIはAppLayoutにまとめ、
<Outlet />で子ルートを挿入 Route indexは親ルートのデフォルト表示を設定できる
Reactでアプリを作るとき、ルーターを正しく理解しておくと画面設計がグッと楽になりそうです。
