React Router

React Routerとは

React Routerは、[[React]] で作るSPAにクライアントサイドルーティングを組み込むライブラリです。[[SPAとMPA]] で説明されるとおり、SPAはページ遷移のたびにHTMLを読み直さず、JSで画面を書き換えます。このとき「URLと表示する画面の対応付け」「戻る/進むボタンへの対応」を引き受けるのがルーターです。

const router = createBrowserRouter([
  { path: '/', element: <HomePage /> },
  { path: '/projects/:projectId', element: <ProjectDetailPage /> },
])

/projects/:projectId の :projectId は動的パラメータで、useParams() で値を取り出して「一覧のどの項目の詳細を出すか」を決めます。

画面遷移の仕組み

<Link to="/projects"> をクリックすると、React RouterはブラウザのHistory APIでURLだけを書き換え、対応するコンポーネントを描画し直します。サーバーへのリクエストは発生しないため遷移が速く、[[状態管理]] しているデータもページをまたいで保持されます。実際の [[DOM]] の差し替えはReactの再レンダリングそのものです。

URLを持てることで「この画面を人に共有する」「ブックマークする」「リロードしても同じ画面に戻る」というWebらしい振る舞いがSPAでも成立します。

BrowserRouterとHashRouter

方式	URLの例	前提
BrowserRouter	`/projects/123`	サーバー側のSPAフォールバックが必要
HashRouter	`/#/projects/123`	サーバー設定なしで動く

BrowserRouterのURLは見た目がきれいですが、/projects/123 を直接開く(リロードする)とサーバーへそのパスのリクエストが飛びます。実ファイルは存在しないため、どのパスでも index.html を返す設定(SPAフォールバック)がサーバー側に必要です。静的ファイルしか置けない環境(file:// や chrome-extension:// など)ではこの設定ができないので、URLの # 以降だけで画面を切り替えるHashRouterを使います。

ルート単位のコード分割

各ページを React.lazy で遅延ロードすると、ルート定義がそのままバンドル分割の単位になります。初回アクセスでは表示中のページ分だけを読み込み、他のページのコードは遷移時に取得するため、初期表示が軽くなります。

初学者向けポイント

「SPAなのにリロードすると404になる」は典型的なSPAフォールバック設定漏れです。開発サーバーでは動くのに本番で壊れる、という形で現れます
<a href> でなく <Link> を使うのは、通常のアンカーだとブラウザがページ全体を再読み込みしてSPAの意味がなくなるためです
[[Next.js]] のようなフレームワークはルーターを内蔵しています(ファイル配置がそのままルート定義になる)。React Routerは「素のReact + Vite」構成での定番です

関連技術とのつながり

[[SPAとMPA]] — ルーターが必要になる背景。SPAの遷移の仕組み
[[React]] — ルートに対応付けるコンポーネントを書くライブラリ
[[状態管理]] — ページをまたいで状態を保てるのはSPA遷移だから
[[Next.js]] — ルーティング内蔵のフレームワークという対比

Q: クライアントサイドルーティングの説明として正しいのはどれ?
- [ ] 遷移のたびにサーバーから新しいHTMLを取得して表示する
- [x] History APIでURLを書き換え、JSで対応する画面を描画し直す
- [ ] URLを変えずに画面だけを切り替える
解説: React RouterはURLの書き換えと画面の再描画をセットで行います。サーバーへのページ取得リクエストは発生しません。

Q: BrowserRouterを使うSPAで、サーバーにSPAフォールバックが必要な理由はどれ?
- [x] URLを直接開くと実在しないパスへのリクエストになるため、index.htmlを返す必要がある
- [ ] Linkコンポーネントがサーバーの設定を読み込むため
- [ ] History APIがサーバーとの通信を前提にしているため
解説: /projects/123 のようなパスに実ファイルはありません。リロードやディープリンクに応えるには、任意のパスでindex.htmlを返す設定が必要です。

Q: HashRouterを選ぶべき状況はどれ?
- [ ] URLをできるだけ短くしたいとき
- [ ] ページ数が多いとき
- [x] SPAフォールバックを設定できない配信環境で動かすとき
解説: #以降はサーバーへ送られないため、静的配信しかできない環境(file://やブラウザ拡張のページなど)でもルーティングが破綻しません。