ReactのRouterの基本的な使い方！ページ遷移のあるアプリを構築する

Reactを使ったアプリで、URLに応じて画面を切り替えたり、ユーザーがリンクをクリックした際にページ遷移のような体験を実現したいことは多いでしょう。React Routerはそのための強力なライブラリであり、最新のバージョンではシンプルさと柔軟性にフォーカスしたAPIが提供されています。この記事では初めて使う方にも分かりやすく、導入から応用まで「React Router 使い方」に必要な知識を網羅的に解説します。

React Router 使い方 を始める前に知っておきたい基礎

React Routerを使い始める前に理解しておきたいのは、ルーティングとは何か、どんな種類のルーターがあるか、バージョンによる違いなどです。基本を押さえておくことで、導入や後々のアップグレード時にも迷いにくくなります。ここではルーティングの基本概念と必要な依存関係、そしてReact Routerの現行バージョンの特徴について説明します。

ルーティングとは何か

ルーティングとは、ブラウザのURLパスに応じて異なるUIコンポーネントを表示する仕組みです。ユーザーがリンクをクリックした際にページ全体を再読み込みするのではなく、画面の特定部分だけ切り替えることでシームレスな体験を提供します。このようなSPA（シングルページアプリケーション）のパターンが一般的です。

必要な依存関係とインストール

React Routerを使うには、Reactの環境がすでに整っていることが前提です。主にインストールするのはルーティングライブラリ本体です。また、TypeScriptを使っている場合は型定義ファイルも含めることで補完が効きやすくなります。最新のライブラリを用いることで、保守性と将来性が向上します。

バージョンの違いと現行の主要機能

React Routerはこれまでバージョン5、6と進化し、現在はバージョン7が主流です。バージョン6で導入された自動マッチング、Routesコンポーネント、elementプロップによるレンダリングなどの改善点がさらに洗練されています。バージョン7ではルーティングモードやデータ読み込みといった機能が充実し、構築の自由度が高まっています。

React Router を使った基本的なページ遷移の構築手順

React Router を実際にアプリに導入し、ページ遷移を実装する一連の流れをステップごとに追っていきます。環境のセットアップから、ルートの定義、リンクの設置、404ページ対応まで、初学者が躓きやすい点に対しても具体例を交えて解説します。

Router のセットアップ

まずはルーターでアプリをラップする必要があります。一般的にブラウザ環境では BrowserRouter を使い、アプリケーションのエントリポイント（例えば index.jsx や main.jsx）で使用します。これによりURLの履歴管理やパスの追跡が機能します。Nest や共有レイアウトを含む構造を想定するならば、FrameLayout など共通部分を親 Route にまとめる設計が望ましいです。

ルート（Route）と Routes コンポーネントの定義

Routes コンポーネントの中に複数の Route を配置し、それぞれの path と表示要素（element）を指定します。以前のバージョンでは Switch を使い、exact プロップで完全一致を制御する必要がありましたが、最新バージョンでは Routes がルート候補を自動でランク付けし、最適なものを選びます。このためコードが簡潔になり、誤動作のリスクも減ります。

リンクの設置とナビゲーション

画面遷移には Link コンポーネントや NavLink を使います。Link をクリックすると URL が変わり、対応する Route の要素がレンダリングされます。NavLink を使えば現在のパスに応じてクラス名を付与でき、ナビゲーションのアクティブ状態を示すことが可能です。また、useNavigate フックを使ってプログラムから遷移するケースもあります。

404 ページの対応（存在しないルート）

ユーザーが存在しない URL にアクセスしたときには、ワイルドカードパス（“*”）を使って NotFound コンポーネントを定義します。これにより予期せぬ入力や誤ったリンクに対して適切な画面を返すことで UX（ユーザー体験）が向上します。Routes 内で“*”パスを最後に配置することが推奨されます。

React Router の高度な使い方：Hooks やネストしたルートなど

基本が理解できたら、次はより高度な使い方を学びます。ここでは URL パラメータや動的ルート、ネスト（入れ子）のルート、ルートガード、遅延読み込みなどを通じて、より実践的な構成に挑戦します。これらを理解することで中〜大規模アプリケーションでも React Router を柔軟に設計できます。

URL パラメータの扱い（useParams）

動的なパス、例えば “/users/:userId” のような URL を定義すると、その“userId”の値をコンポーネント内で取得できます。useParams フックを使うことで、現在のパラメータをオブジェクトとして取得でき、API呼び出しや条件分岐に活用できます。動的ルートは見た目の柔軟性と機能性を大きく向上させます。

プログラムからのナビゲーション（useNavigate）

ボタンのクリックやフォーム送信などのイベントハンドラ内で、ユーザーを別のページに移動させたいことがあります。このようなときには useNavigate フィックを使い、新しいパスを指定して遷移します。また、replace モードで履歴を置き換える、履歴を戻すなどの高度な制御も可能です。この機能により UI／UX を柔軟に設計できます。

ネストしたルートと共通レイアウト

親ルートで共通の UI 部分（ヘッダーやサイドバーなど）を配置し、その下に Outlet コンポーネントを使うことで子ルートの内容を差し替える構成が可能です。ネストによりレイアウトが一貫し、共通部分を重複させることなく保守性が高まります。自動インデントや相対パスとの組み合わせでコード構造が見やすくなります。

遅延読み込みとコード分割（lazy, Suspense）

ルートごとにコンポーネントを分割し、初回読み込みを軽くする遅延読み込みを利用できます。React の lazy と Suspense を使うことで、必要なルートのコンポーネントのみ読み込む実装ができ、パフォーマンスの最適化につながります。大きなアプリケーションでは特に重要な手法です。

ルートガードと認証保護されたルート

認証が必要なページなど、特定のルートへのアクセスを制限したい場合があります。こうした制限はカスタムコンポーネントを作成し、アクセス権限をチェックしたうえで認証済みユーザーにのみ子ルートをレンダリングするようにします。React Router の機能と組み合わせることで柔軟なガード実装が可能です。

React Router v7 の新機能と移行時の注意点

多くのプロジェクトではバージョン6から7への移行を考える必要があります。ここでは v7 の新モードやデータ読み込み機能、また移行時によく発生する落とし穴を整理します。既存のコードベースを最新仕様に沿わせ、メンテナンス性と将来性を確保する観点で押さえておきたい内容です。

v7で追加されたモードとデータモード

React Router v7 は複数のルーティングモードを提供しています。特にデータロードを伴うモードが強化されており、ロード関数やアクション関数をルート定義に含めてデータ取得や処理を一元管理できるようになっています。これにより、ルート単位で必要なデータと UI を結びつける設計がしやすくなる設計がされています。

移行時の API の違いと互換性

v6 から v7 へのアップデートでは API 名の変更や機能の整理が主な変更点です。Switch が削除され、Routes を使用すること、component プロップが element プロップに置き換えられること、useHistory の代わりに useNavigate を使うことなど、コードの自然な書き換えが求められます。互換性を保つためにはテストを通じて挙動の確認を行うことが重要です。

エラーハンドリングとルートレベルでのローディング</

最新の機能では、ルートごとにエラーハンドリングを持たせたり、データのローディング進捗を管理する機能が標準化してきています。読み込み中のローダーやエラー表示画面をルート定義に含めることで、ユーザーが待機状態や障害状態を視覚的に理解しやすくなり、UXの信頼性が向上します。

React Router を使った実践例：簡単なブログアプリを構築してみる

知識が理解できたら、実際に簡単なブログアプリを構築することで体験することが最も学びになります。ここでは記事一覧、記事詳細、認証が必要な投稿ページ、404ページを含む構成を例としてコード構造と考え方を紹介します。

ディレクトリ構造とファイルの準備

まずは src フォルダ内の structure を次のように準備します。pages フォルダに Home.jsx、PostList.jsx、PostDetail.jsx、NewPost.jsx、NotFound.jsx を置きます。components フォルダに Layout.jsx（共通レイアウト）、Header.jsx、Footer.jsx を用意します。認証ロジックは utils/auth.js のようなファイルに分けることで見通しが良くなります。こうした構造が保守性を高めます。

ルート定義例

App.jsx（またはルーティング設定ファイル）には Layout をラップする親 Route を用意し、Outlet を配置します。その中に以下のようなルートを定義します：Home（トップページ）、記事一覧、記事詳細（動的パラメータ付き）、新規投稿（認証済みのみアクセス可）、404 を含むワイルドカードルートです。こうすることで画面遷移の流れとアクセス制御を整理できます。

認証保護されたルートの実装

NewPost ページを閲覧するには認証が必要とします。認証状態を判定する AuthWrapper コンポーネントを作成し、その中でユーザーがログインしていなければログインページに遷移するようにします。そのコンポーネントを NewPost の Route にラップすることでアクセス制限を実現します。また、認証トークンやロールに応じたアクセス制御を追加すれば、より柔軟になります。

遅延読み込みを併用するコード例

大きなページコンポーネントは React.lazy を使ってモジュールを遅延読み込みし、Suspense を使ってローディング表示を差し込むようにします。これにより初期読み込み速度が改善し、ユーザーへのレスポンスが良くなります。ブログアプリの例では記事詳細ページや新規投稿ページなどを lazy 化することで実用性が高まります。

まとめ

React Router を使うことで、React アプリにおいて URL に基づいた画面遷移やナビゲーションをスムーズに実装できます。基礎としては Router の設定、Route や Routes の定義、Link や NavLink を使った移動、404 ページ対応などを押さえることが重要です。そこから useParams や useNavigate を使った動的ルーティングやプログラム的遷移、ネスト構造の設計、遅延読み込み、ルートガードなどを学ぶことでより高度なアプリ構築が可能となります。

また、React Router のバージョンを最新に保ち、v7 の新機能を活用することで将来的な保守性とユーザー体験を両立できます。ブログアプリのような典型的な構成を通じて実践を重ねることで、「React Router 使い方」に対する理解は確実に深まります。これらの知識をもとに、ご自身のアプリに最適なルーティングを設計していただきたいと思います。