Reactでルーティングの設定を行う手順！ページ遷移をスムーズに実装

Reactアプリでページ遷移を実現するにはルーティングの設定が不可欠です。単にパスとコンポーネントを紐付けるだけでなく、ネストされたレイアウト、404ページ、認証ガード、データを事前に読み込むローダーなどの機能も押さえる必要があります。この記事ではReact Router最新バージョンを使ったルーティング設定の手順を丁寧に解説し、実践的なコード例を交えてスムーズなページ遷移を実装する方法を学びます。

React ルーティング 設定の基本とは

React ルーティング 設定とは、ReactアプリにおいてURLのパスに応じて異なるコンポーネントを表示させる仕組み全体を指します。最新のReact Routerでは単に表示を切り替えるだけでなく、ネストされたルート、レイアウトの共通化、データのプリフェッチ、エラー処理などもサポートされています。これによってユーザー体験が向上し、SPAとして自然な遷移が可能になります。

特に最新のルーターでは、createBrowserRouter や RouterProvider を使う設定方式が推奨されており、React Router v7では古いバージョンからのアップグレードガイドも整備されています。BrowserRouter など従来のコンポーネントベースの設定も使えますが、新機能やデータローダーなどは新しい API を用いることでより強力な機能を得られます。

React Router の役割

React Router は React に標準搭載されている機能ではないルーティング機能を提供するライブラリです。URL を読んで対応するコンポーネントを表示し、ページリロードなしでビューを切り替えるクライアントサイドルーティングを実現します。これによりユーザーは自然なブラウザの履歴操作やブックマーク機能を利用できます。

また URL パラメータ、クエリ文字列、動的セグメント、リンクのマッチング順位の制御など、多様な要件に応えることが可能です。最新バージョンではエラー要素やローダー、アクションなどルート単位でデータを扱う機構も備わっています。

バージョンの違いと移行点

React Router v6 と v7 の主な違いとして、新しい data router アーキテクチャが挙げられます。v7 では createBrowserRouter や RouterProvider を中心とする設定方式に統一され、ローダーやアクション、エラー境界の指定がルート定義の中で可能になりました。v6 からの移行ガイドも用意されており、将来的な互換性を見据えて future フラグを使って段階的に対応する方法が推奨されています。

例えば v6 では Routes と Route を使った JSX ベースのルーティング定義が中心でしたが、v7 では設定オブジェクトベースがより強調され、より明示的なルーティング構成が可能です。過去の方式も残るものの、新規プロジェクトでは新しい API を使うのが望ましいです。

React ルーティング 設定に必要な依存と前提

ルーティング設定のためには React 本体および ReactDOM が最新環境にあることが望ましく、React Router の最新版をインストールする必要があります。Node バージョンや React バージョンが対応していないと新機能を利用できない場合があります。

またルーティングを設計する際にはアプリケーションの構造を先に設計することが重要です。ページ構成、ネスト構造、共通レイアウト、認証が必要なページ、有効なパラメータなどを整理することが配置ミスや混乱を防ぎます。

実際の React ルーティング 設定の手順

React でルーティング設定をするには、まずプロジェクトに React Router を導入し、ルート定義を行い、それに応じたコンポーネントとレイアウトを作成します。設定手順は段階的であり、まず基本の BrowserRouter や createBrowserRouter から始めて、次にネストやエラー処理、認証、データ取得などの応用へと進む構成が安定しています。

手順を把握することで、何をどのタイミングで実装すれば良いかが明確になります。これにより余計な設計修正を減らし、ページ遷移がスムーズなアプリを効率的に構築できます。

パッケージのインストール

まずルーティングに必要なパッケージ react-router または react-router-dom をインストールします。最新版を使うことで最新の API や機能を利用できるため推奨です。npm または yarn を使って導入します。そして Node と React のバージョンが要件を満たしているかを確認します。

ルーティング定義の作成方法

Routing 定義は主に２つのスタイルがあります。従来の BrowserRouter を使う方法と、createBrowserRouter と RouterProvider を使う新しいデータルータ方式です。新しい方式ではローダー、アクション、エラー要素などを含めた設定が可能で、より構造的で拡張性があります。

ネストされたルートとレイアウトの共通化

共通のヘッダーやサイドバーを持つレイアウトを作成し、子ルートをそのレイアウトの中でネストさせる構造にすると保守性が高まります。Outlet コンポーネントを使って子ルートの描画箇所を指定します。これによってレイアウトの一部を再利用でき、一貫性のある UI を維持できます。

404 ページやエラーハンドリングの設定

どのルートにも一致しない URL に対しては catch-all ルートを設定し、404 ページを表示させます。さらに新しい API を使うことでエラー要素をルートに紐付けて、データ取得失敗やアクセス制限時に専用のエラーページを表示できます。

React ルーティング 設定 の応用テクニック

基本を押さえたら、React ルーティング 設定をより便利で高度にするための応用テクニックに取り組みます。認証保護されたルート、URL パラメータやクエリパラメータの取得、動的ルート、プログラム的ナビゲーションや遅延読み込みなどが含まれます。これらのテクニックを使いこなすことで実践的でユーザーに優しい SPA を構築できます。

またパフォーマンスを考慮してコード分割 (lazy loading) を組み込んだり、データローダーを使ってページ遷移前にデータを取得しておくことで、読み込み時のちらつきや遅延を減らすことができます。

認証ガード付きルートの実装

ユーザーがログインしていないとアクセスできないページを守るために、認証ガードを構築します。Routes定義の中で特定のルートをラップするか、高階コンポーネントを作成してアクセスチェックを行います。認証状態に応じてログインページへリダイレクトさせるのが一般的です。

URLパラメータとクエリの扱い方

動的なパスセグメントを使う方法では URLパラメータを Route の path 属性で宣言し、useParams フックで取得します。加えて useSearchParams を使ってクエリ文字列を扱うことも可能です。これによりページ内で検索条件やフィルタを URL で管理でき、状態の復元や共有が容易になります。

動的ルートおよび遅延読み込み

動的ルートとは、一部が可変であるパスを表すルートであり、ユーザーごとやアイテムごとに異なる表示になります。さらに React.lazy と Suspense を使ってコンポーネントを遅延読み込みすると初期ロードが軽くなり、必要なときにのみコードを読み込むことができてパフォーマンス向上につながります。

プログラム的ナビゲーションとリンク

ユーザーのクリックだけでないアクションから URL を変更したい場合には useNavigate フックを使います。フォームの送信後や特定の条件を満たしたとき、自動的に他のページへ移動させることができます。また Link や NavLink コンポーネントを使って標準のリンク操作を扱い、NavLinkではアクティブ状態のスタイル制御も可能です。

React ルーティング 設定 のデモコード例と比較

ここでは React Router v7 のデータルータ方式と従来の BrowserRouter 방식をコードで比較します。それぞれの特徴を表形式で示し、どちらをいつ使うか判断する材料を提供します。最新情報を踏まえた適切な選択ができるように構成します。

以下の表で両者の違いを分かりやすく比較します。構築方法、データ取得、エラー処理、設定の簡潔さ、柔軟性などの観点を含めています。

エラー回避と注意すべきポイント in React ルーティング 設定

ルーティング設定においては、開発中に遭遇しやすい落とし穴やバグの原因となる箇所がいくつかあります。これらのポイントを事前に把握しておくことで、後から手戻りを減らし、ルーティングが安定したアプリケーションを構築できます。

特に新しいバージョンへ移行する際の破壊的変更や relative path と splat path の扱い、リンク先の記述ミスなどに注意が必要です。またパフォーマンス観点では不要なレンダリングを避けるためにコード分割と遅延読み込みを適切に使うことが大切です。

相対スプラットパスの変更に注意

古いバージョンから移行する際には、複数セグメントのスプラットパス（splat path）が含まれるルートの相対リンクの処理が変わっていることがあります。特に parent route が dashboard/* のように定義されている場合、リンク先を相対的に書いていたコードが動かなくなることがあり、明示的にパスを分けて children として定義する必要があります。

リンクと NavLink の使い分け

Link は単純なリンク生成に使い、NavLink はアクティブ状態のスタイル制御が必要なときに適しています。NavLink を使うことで現在のルートと比較しアクティブ状態のクラスやスタイルが適用でき、ナビゲーション UI の視覚的なフィードバックが向上します。

遅延読み込みの注意点

React.lazy と Suspense を使って主要なルートや共通レイアウトを遅延読み込みすると、初期ロードが軽くなりますが、Suspense のフォールバック UI やロード中の UX を設計しておく必要があります。特に複数の非同期ロードが混在する場合は読み込み中の表示が重ならないような構成を考えるべきです。

認証ガードでのリダイレクトロジック

認証ガードを設定する際、未認証時のリダイレクト先や許可されたルートに戻すロジックをしっかり設計しておくことが重要です。また認証変化時の再レンダリングやセッション期限切れ時の挙動も考慮する必要があります。errorElement や遷移先の条件付き表示を組み合わせると安全性が高まります。

React ルーティング 設定 サンプルプロジェクトの実装例

ここでは最新形式である data router を使ったサンプルのルーティング構成を提示します。Root レイアウト、Dashboard ページ、設定ページ、404 エラーページを含みます。実践に近い形でアプリ構造の参考になるよう設計しています。

以下のような構成を想定します。フォルダ構造、ルート定義、各コンポーネントの作り方を含めて紹介します。

フォルダ構造の例

プロジェクトのディレクトリ構造を以下のように整理すると管理しやすくなります。
ルートディレクトリの下に routes フォルダを設け、共通レイアウトやページコンポーネントを整理します。
例として Root.jsx、Dashboard.jsx、Settings.jsx、NotFound.jsx などを配置し、それぞれの責任を明確に分けます。

ルート定義コード例

ルート定義の具体例は以下のようになります。
“`jsx
import { createBrowserRouter } from react-router
import Root from routes/Root
import Dashboard from routes/Dashboard
import Settings from routes/Settings
import NotFound from routes/NotFound

const router = createBrowserRouter([
{ path ‘/’, element , children [
{ index true, element },
{ path ‘settings’, element },
{ path ‘*’, element }
] }
])
“`
この構成で RouterProvider を使ってルーティングを React のエントリーポイントで渡します。これによりページ遷移、404表示、ネストされたレイアウトが機能します。

共通レイアウトコンポーネント (Outlet 利用)

共通レイアウトではヘッダーやナビゲーションバーを含む部分を Root レイアウトで用意し、子ルートの表示部分を Outlet で配置します。これによりルートごとの切り替えでレイアウト全体を再レンダリングする必要がなくなり、UI の一貫性が保てます。

まとめ

React ルーティング 設定 をしっかり理解することで SPA のユーザー体験が大きく向上します。基礎であるルーティングの導入から、data router 方式の使い方、ネストや認証ガード、404 ページ、動的パラメータ、遅延読み込みなど応用テクニックまで一通り押さえることが重要です。

特に新規プロジェクトでは React Router の最新バージョンを用いて createBrowserRouter や RouterProvider を使用する方式を採用し、将来的な変更にも対応しやすい構造にすることが望ましいです。