第16回：React Router入門：ページ遷移とURL設計の基本

前回：React基礎編・総まとめ：ToDoアプリで全知識を繋げようでは、これまでの知識を1つにまとめました。

しかし、今のままではどんなに多機能になっても「1つのURLに1つの画面」しかありません。本物のWebアプリには「ホーム」「プロフィール」「設定」といった複数のページが必要ですよね。

2026年現在、Reactでページを切り替えるデファクトスタンダード（事実上の標準）である React Router を使って、ブラウザをリロードさせずに一瞬で画面を切り替える「SPA（シングルページアプリケーション）」の真髄を学びましょう。

1. 「リンク」と「ルーティング」の違い
2. 準備：React Routerをインストールしよう
3. 【実践】3つのページを持つWebサイトを作ろう
1. App.jsx（最小構成版）
4. コードの解説（JavaScript & React）
1. JavaScriptのポイント
2. Reactのポイント
5. 2026年の学び：URLは「アプリの状態」である
1. 今回のまとめ
2. 次回予告：URLから「ID」を読み取ろう

1. 「リンク」と「ルーティング」の違い

普通のHTMLでは、<a> タグをクリックするとブラウザが新しいページを読み込み直します。

従来のページ遷移: カチッと押す → 白い画面が出る → 新しいページを読み込む（時間がかかる）。
React Routerの遷移: カチッと押す → JavaScriptが中身の部品（コンポーネント）だけをサッと入れ替える（一瞬！）。

URL（パス）に合わせて、表示するコンポーネントを自動で選んでくれる仕組み、それが「ルーティング」です。

2. 準備：React Routerをインストールしよう

Viteで作ったプロジェクトのターミナルで、以下のコマンドを実行します。

Bash

npm install react-router-dom

3. 【実践】3つのページを持つWebサイトを作ろう

今回は「ホーム」「自己紹介」「お問い合わせ」の3画面を切り替えるサイトを作ります。 App.jsx を以下のように書き換えてみてください。

App.jsx（最小構成版）

JavaScript

import React from 'react';
// React Routerから必要な部品をインポート
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

// 1. 各ページの部品（コンポーネント）
const Home = () => <h2>🏠 ホーム画面へようこそ！</h2>;
const About = () => <h2>📖 私はReactを学習中のエンジニアです。</h2>;
const Contact = () => <h2>✉️ お問い合わせはSNSまで。</h2>;

export default function App() {
  return (
    // 2. BrowserRouterでアプリ全体を包む
    <BrowserRouter>
      <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <nav>
          {/* Linkタグ: ページをリロードせずにURLだけ変える魔法のタグ */}
          <Link to="/">ホーム</Link> | {" "}
          <Link to="/about">自己紹介</Link> | {" "}
          <Link to="/contact">お問い合わせ</Link>
        </nav>

        <hr />

        {/* 3. Routesの中で、URLとコンポーネントを紐付ける */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

CodeSandboxでReact Routerの動きを体験する

4. コードの解説（JavaScript & React）

JavaScriptのポイント

ライブラリのインポート: { BrowserRouter, ... } のように、必要な機能だけを { } で囲んで取り出しています。
リンクの仕組み: Link タグは最終的にHTMLの <a> になりますが、React Routerがクリックを横取りして「リロード防止」と「コンポーネント切り替え」を行ってくれます。

Reactのポイント

path と element: 「URLが /about だったら（path）、この部品を出してね（element）」という設定です。
第9回：条件付きレンダリング の応用: React Routerは、内部的には「URLというState」を見て、条件分岐で表示する部品を切り替えている巨大な仕組みと言えます。