React Router 初めての画面遷移

Posted at 2026-01-28

背景

こちらの教材をやっていたが、ReactRouterのバージョンが古かった。
v5だったので、2026/01/28時点での最新である7.13.0バージョンのドキュメントを読んでいった記録をします

今回作成したもの

本当に簡易的な画面遷移のソースコード

// v7では 'react-router' からインポート（v6互換で 'react-router-dom' も使用可）
import { BrowserRouter, Routes, Route, Link } from 'react-router';
import { Home } from './Home';
import { Page1 } from './Page1';
import { Page2 } from './Page2';

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        {/* ナビゲーション */}
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/page1">Page1</Link>
            </li>
            <li>
              <Link to="/page2">Page2</Link>
            </li>
          </ul>
        </nav>

        {/* 画面切り替え部分 */}
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/page1" element={<Page1 />} />
          <Route path="/page2" element={<Page2 />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

ReactRouterとは

React Router は、Reactアプリで「画面遷移（ページ切り替え）」を実現するためのライブラリ
URLと表示するコンポーネントを結びつける仕組みを提供してくれています

ReactRouter 3つのモード

Declarative Mode

Declarative mode enables basic routing features like matching URLs to components, navigating around the app, and providing active states with APIs like <Link>, useNavigate, and useLocation.

Declarativeモードは、 URLとコンポーネントの対応付け、画面遷移、現在のURL情報の取得など、 基本的なルーティング機能だけを提供します。<Link> や useNavigate、useLocation といったAPIを使って、アプリ内を移動できます。

コンポーネントのルーティングだけしたい！
データ取得、フォーム送信は関知しない！モード

Data Mode

By moving route configuration outside of React rendering, Data Mode adds data loading, actions, pending states and more with APIs like loader, action, and useFetcher.

Dataモードでは、ルーティング定義をReactのレンダリングの外に出すことで、

データ取得（loader）
データ更新・フォーム送信（action）
通信中状態の管理（pending）

などを扱えるようになります。

Framework Mode

Framework Mode wraps Data Mode with a Vite plugin to add the full React Router experience with type-safe href, intelligent code splitting, SPA/SSR/static rendering strategies, and more.

Frameworkモードは、 Dataモードを Viteプラグインで包んだもので、

型安全なURL・params
自動コード分割
SPA / SSR / SSG 対応
ファイルベースルーティング

などを含む、 フル機能のReact Router体験を提供します。
フレームワークみたいなのが欲しい人向け

今回はDeclarative Modeが対象

BrowserRouter

BrowserRouterは、React Routerのルーティング機能全体を有効にするための機能

<BrowserRouter>
  {/* この中でReact Routerの機能が使える */}
  <App />
</BrowserRouter>

BrowserRouterの役割

現在のURL情報の管理

今どのURLにいるのかを把握し、子コンポーネントに提供する
useLocationなどのフックで現在のURLを取得できるのはこいつのおかげ

HistoryAPIのラップ

ブラウザのHistory APIを使って、URLの変更を管理
history.pushState()やhistory.replaceState()を内部で使用
これにより、サーバーへのリクエストなしでURLを書き換えられる

ブラウザの戻る・進むボタンへの対応

popstateイベントを監視して、ブラウザの履歴操作に反応
戻るボタンを押したときも、正しいコンポーネントが表示される

なぜBrowserRouterで囲む必要があるのか

React Routerのコンポーネント（Routes、Route、Linkなど）は、RouterContextという内部的なコンテキストに依存している。BrowserRouterがこのコンテキストを提供するので、囲まないと動かないらしい

RoutesとRoute

URLとReactコンポーネントをどう結びつけるか、その仕組みを担うのがRoutesとRoute

Routes - ルートのコンテナ

Routesは複数のRouteをまとめて、現在のURLに一致するものを1つ選ぶコンポーネント。

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/page1" element={<Page1 />} />
  <Route path="/page2" element={<Page2 />} />
</Routes>

Routesの役割

マッチング処理

現在のURL（例：/page1）と、各Routeのpathを比較
一致するRouteを見つけて、そのコンポーネントをレンダリング

排他的なレンダリング

複数のRouteがマッチしても、最も適切な1つだけを選択
v5以前ではSwitchという名前だったが、v6以降はRoutesに統合された

相対パスの解決

ネストしたRoutesでは、親のパスを基準に相対パスを解決してくれる

Route - URLとコンポーネントの対応定義

Routeは**「このURLのときは、このコンポーネントを表示する」という対応関係**を定義する。

<Route path="/page1" element={<Page1 />} />

Routeの主要なprops

prop	説明
`path`	マッチさせたいURLパターン
`element`	マッチしたときに表示するReactコンポーネント
`index`	親ルートと同じURLでマッチする「デフォルトの子ルート」

3つの関係性

BrowserRouter（URL監視・履歴管理）
  └─ Routes（マッチング処理）
       ├─ Route（/）       → Home
       ├─ Route（/page1）  → Page1
       └─ Route（/page2）  → Page2

URLが変わると：

BrowserRouterが変更を検知
Routesが新しいURLに対して全Routeをチェック
マッチしたRouteのelementをレンダリング

Link

Linkは、React Routerで提供される画面遷移用のコンポーネント。

<Link to="/page1">Page1へ移動</Link>

なぜaタグではなくLinkを使うのか

HTMLの<a>タグを使うと、クリック時にブラウザがサーバーへリクエストを送信して、ページ全体を再読み込みしてしまう。

一方、<Link>コンポーネントは

ページ全体の再読み込みを防止
HistoryAPIを使ってURLだけを書き換える
React Routerが新しいURLに対応するコンポーネントを表示

これにより、SPAとしてのスムーズな画面遷移が実現できる。

感想

久々にドキュメント長時間読んだなぁ

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up