Reactルーティング基礎！SPAの仕組みとReact Router

Web開発でよく耳にする「ルーティング」。Reactではどのようにページ切り替えを実現しているのでしょうか？

本記事では、従来のWebサイトとの違いやSPA（Single Page Application）のメリットを踏まえながら、react-router-dom を使った具体的なルーティングの実装手順を解説します。

1. 従来のルーティングとReact（SPA）のルーティングの違い
2. SPAの概要とメリット・デメリット
- SPAのメリット
- SPAのデメリット
3. プロジェクト作成と必要なパッケージのインストール
- ① プロジェクトの作成
- ② react-router-dom のインストール
4. サンプルページのコード解説
5. 開発サーバーの立ち上げと動作確認
- 🔍 ルーティングの確認ポイント
まとめ

1. 従来のルーティングとReact（SPA）のルーティングの違い

従来のWebサイトと、Reactが得意とするSPAでは、ページ移動の仕組みが根本的に異なります。

従来のルーティング（MPA） リンクをクリックするたびにサーバーへ新しいHTMLをリクエストし、画面全体をリロード（再描画）します。移動のたびに画面が一瞬真っ白になります。
毎回ページすべてを読み込みなおしています。
Reactのルーティング（SPA） 初回のアクセスでJavaScriptを一括ダウンロードします。ページ移動時はJavaScriptがURLの変化を検知し、クライアント側で必要な部分のデータだけを最小限だけ差し替えるため、リロードが発生しません。

【従来（MPA）】 リンククリック ➔ サーバーからHTML取得 ➔ 画面全体リロード
【React（SPA）】リンククリック ➔ JSがURL検知 ➔ 必要なコンポーネントだけ描画

自分が思ったのはブラウザというよりスマホアプリやゲーム画面のように動くページというイメージです。

2. SPAの概要とメリット・デメリット

SPA（Single Page Application）とは、単一のHTMLページ（index.html）上でコンテンツを動的に書き換えるWebアプリケーションの仕組みです。

自分もここが最初わかりづらくて、実際ブラウザのアドレスバーのURLは変わっています。
でもJavaScriptがブラウザの『見た目のURL』だけを騙して（書き換えて）いるような感じです。

「1つのHTMLの中で中身を書き換えるだけなら、URLを変えなくてもいいのでは？」と思うかもしれません。

わざわざURLを書き換えているのには、Webとして重要な3つの理由があります。

ブックマーク（お気に入り）できる
- /about のURLが存在することで、ユーザーがそのページを直接ブックマークできます。
「戻る・進む」ボタンが使える
- ブラウザの「← 戻る」ボタンを押したときに、前の画面にスムーズに戻れます。
リンクをシェアできる
- 他の人に「このページ見て！」と特定ページのURL（/contact など）をLINEやXで共有できます。

これにより、SPAは「URLが変わってブックマークやシェアができる便利さ」と、「リロードがなくてアプリのように速い快適さ」を両立しています。

本番公開時に /about で直アクセスすると404エラーになる？

ローカル開発環境（npm run dev など）ではViteなどの開発サーバーが自動でフォールバック処理を行ってくれるため問題なく動きます。しかし、本番サーバーにデプロイした際は**「存在しないURLへのリクエストはすべて index.html を返す」**という設定（フォールバック設定）をサーバー側で行う必要がある点に注意しましょう！

このフォールバック設定についてはデプロイ編の記事で詳しく解説します。

SPAのメリット

アプリのような快適な操作感: リロードが挟まらないため、滑らかに画面が切り替わります。
通信量の削減: ヘッダーやフッターなどの共通パーツを何度もダウンロードし直す必要がありません。

SPAのデメリット

初回読み込みが重くなりやすい: 最初のアクセスでアプリに必要なJavaScriptをまとめて読み込むため、表示までに時間がかかる場合があります。
SEOの工夫が必要: 初期状態のHTMLにコンテンツが含まれていないケースがあり、検索エンジンのクローリングに配慮が必要です。

特に検索エンジンからの流入やAdSense広告を狙っている方はここが要注意ポイントです！

基本的にクローラーはJavaScriptを実行できなかったため、以前までは全くヒットしませんでした。現在、Googleのクローラーが進化したためインデックスはされますが、処理の遅延やSNSシェア（OGP）の面で不利な点があります。

自分が使うときも、業務効率化アプリなどなら通常のSPAを使用しています。逆に「検索流入を狙うブログやECサイト」を作る場合は、Next.jsなどのフレームワークを使ってSSR/SSGするようにしています。

3. プロジェクト作成と必要なパッケージのインストール

ではここから実際にプロジェクトを作って行きます。

Viteを使ってReactプロジェクトを作成し、ルーティングに必要なパッケージを導入します。

① プロジェクトの作成

ターミナルを開き、以下のコマンドを実行します。

# ViteでReactプロジェクト（JavaScript）を作成
npm create vite@latest react-routing-demo -- --template react

# 質問されるので対話形式で答えていきます。
Which linter to use?
Oxlint　← オックスリントでコード補完出来ます。

Install with npm and start now?
Yes　← npm installをして、開発サーバーも自動で立ち上げてくれます。

このコマンドは、「Vite（ヴィート）という高速な開発ツールを使って、Reactのプロジェクトを自動作成するコマンド」です。

② react-router-dom のインストール

React標準にはルーティング機能が含まれていないため、標準ライブラリである react-router-dom を追加します。

npm install react-router-dom

4. サンプルページのコード解説

今回は「トップページ（Home）」「アバウト（About）」「お問合せ（Contact）」の3つの画面に加え、「存在しないページ（NotFound）」を作成し、切り替えられるようにします。

① 各ページコンポーネントの作成

src/pages フォルダを作成し、以下の4ファイルを作成します。

src/pages/Home.jsx

export default function Home() {
  return <h1>トップページ</h1>;
}

src/pages/About.jsx

export default function About() {
  return <h1>アバウトページ</h1>;
}

src/pages/Contact.jsx

export default function Contact() {
  return <h1>お問い合わせページ</h1>;
}

src/pages/NotFound.jsx

import { Link } from 'react-router-dom';

export default function NotFound() {
  return (
    <div>
      <h1>404 - ページが見つかりません</h1>
      <p>お探しのページは存在しないか、移動した可能性があります。</p>
      <Link to="/">トップページへ戻る</Link>
    </div>
  );
}

② ナビゲーションヘッダーの作成 (src/components/Header.jsx)

<a> タグではなく、react-router-dom が提供する <Link> タグを使用します。これにより、ページのリロードを防いでSPA遷移を実現します。

import { Link } from 'react-router-dom';

export default function Header() {
  return (
    <nav style={{ padding: '10px', background: '#f0f0f0' }}>
      <ul style={{ display: 'flex', gap: '15px', listStyle: 'none', margin: 0, padding: 0 }}>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
}

③ ルーティングの設定 (src/App.jsx)

URLのパスとコンポーネントを紐付けます。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

export default function App() {
  return (
    <BrowserRouter>
      {/* 全ページ共通で表示するヘッダー */}
      <Header />

      {/* URLのパスに応じて表示を切り替えるエリア */}
      <main style={{ padding: '20px' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          
          {/* 上記のどれにもマッチしないURLの場合に表示（404設定） */}
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
    </BrowserRouter>
  );
}

💡 404設定のポイント：path=”*”

path=”*” のアスタリスク（*）は「すべてのパスにマッチするワイルドカード」を意味します。
React Routerは上から順番にルーティングを評価していくため、指定した / や /about などに一致しなかった場合に、一番下の path=”*” にヒットして NotFound コンポーネントが表示されます。

5. 開発サーバーの立ち上げと動作確認

設定が完了したら、開発サーバーを起動して動作を確認してみましょう。

npm run dev

ターミナルに表示されたURL（例: http://localhost:5173）をブラウザで開きます。

🔍 ルーティングの確認ポイント

ヘッダーのリンクをクリックしてみましょう。
ブラウザのリロードボタン（更新マーク）が回転しないまま、中央のメッセージだけが切り替わることを確認してください。
404ページの確認: アドレスバーのURLを手動で http://localhost:5173/unknown など存在しないURLに書き換えて「Enter」を押してみます。「404 – ページが見つかりません」が表示され、「トップページへ戻る」リンクで戻れれば成功です。

まとめ

Reactでのページ移動は、react-router-dom を使うことで簡単に実装できます。

<a> タグの代わりに <Link> を使う
BrowserRouter / Routes / Route で画面切替を設定する
想定外のURL対策には path=”*” でNotFoundページを指定する

この基本を押さえておけば、SPAならではの滑らかで親切なWebアプリケーションが作成できます。ぜひ自分のプロジェクトでも試してみてください！

【React入門】React Routerで学ぶページルーティング基礎！SPAの仕組みから実装まで