いちばんやさしいreact-router-dom紹介と使い方

はい、承知いたしました。React Router DOMの最も基本的な紹介から使い方、そして実践的な例までを詳細に解説する、約5000語の記事を記述します。

いちばんやさしいReact Router DOM紹介と使い方：クライアントサイドルーティングの基本を徹底解説

はじめに：なぜReactアプリケーションにルーティングが必要なのか？

WebサイトやWebアプリケーションにおいて、「ルーティング」とは、ユーザーがアクセスしたURLに応じて、どのページ（またはコンポーネント）を表示するかを決定し、切り替える仕組みのことです。例えば、https://example.com/about にアクセスしたら会社概要ページが表示され、https://example.com/products にアクセスしたら商品一覧ページが表示される、といった挙動はルーティングによって実現されています。

従来のWebサイトでは、ユーザーが別のページへのリンクをクリックするたびに、ブラウザはサーバーに新しいページのHTMLファイルを要求し、受け取ったHTMLをレンダリングし直す、というプロセスを繰り返していました。これは「サーバーサイドルーティング」または「ページ遷移」と呼ばれるものです。

しかし、ReactのようなモダンなJavaScriptフレームワーク／ライブラリを使って開発されるアプリケーションの多くは、「Single Page Application (SPA)」と呼ばれるアーキテクチャを採用しています。SPAでは、最初に一度だけHTMLファイルと必要なJavaScript・CSSファイルを読み込んだ後、その後の画面の切り替えはJavaScriptが動的にDOM（Document Object Model）を操作して行います。ページ全体の再読み込みが発生しないため、ネイティブアプリケーションのようなスムーズで高速なユーザー体験を提供できるのが大きなメリットです。

SPAの利点は多い一方で、課題も存在します。それは、ブラウザのネイティブなページ遷移（URL変更とそれに伴うページ全体の再読み込み）を利用しないため、URLと表示されるコンテンツを同期させる仕組みを自分たちで作る必要がある、という点です。ユーザーがブラウザのアドレスバーに直接URLを入力してアクセスした場合、あるいは「戻る」「進む」ボタンをクリックした場合に、アプリケーションは現在のURLを正しく解釈し、対応する画面を表示しなければなりません。また、特定の画面へのリンクを他のユーザーと共有できるように、URLを意味のあるものにする（パーマリンク）必要もあります。

このSPAにおける「クライアントサイドルーティング」（ブラウザ側、つまりJavaScriptがURLに基づいて画面表示を切り替えること）を実現するための、Reactにおけるデファクトスタンダード（事実上の標準）ライブラリが、React Router DOM です。

この記事では、React Router DOMの最も基本的な使い方から、主要なコンポーネントの詳細、そして実践的な例までを、初心者の方でも理解できるように、コードを交えながら丁寧に解説していきます。この記事を最後まで読めば、React Router DOMを使って簡単なナビゲーションを持つSPAを構築できるようになるはずです。

対象読者：

• Reactの基本的な書き方は知っているが、ルーティングについては初めて学ぶ方
• React Router DOMの使い方をゼロから学びたい方
• Reactアプリケーションに複数のページや画面を作成したい方

この記事で学ぶこと：

• Reactアプリケーションにおけるルーティングの必要性
• React Router DOMとは何か
• React Router DOMのインストール方法
• BrowserRouter, Routes, Route, Link といった主要なコンポーネントの使い方
• URLパラメーターやクエリパラメーターの利用方法 (useParams, useSearchParams)
• プログラムによる画面遷移 (useNavigate)
• ネストされたルート (Nested Routes) の基本的な考え方
• 404ページの実装方法
• NavLinkを使ったアクティブリンクのスタイリング
• よくある疑問とトラブルシューティング

さあ、React Router DOMの世界へ足を踏み入れましょう！

Reactアプリケーションにおけるルーティングの課題（もう少し詳しく）

SPAの最大の利点は、スムーズな画面遷移です。リンクをクリックしてもページ全体がリロードされないため、ユーザーはストレスなくアプリケーション内を移動できます。まるでネイティブアプリを使っているかのような体験です。

しかし、このスムーズさは、ブラウザが持つ本来の「ページ遷移」の仕組みを使わないことで実現されています。従来のウェブサイトでは、リンクをクリックするとブラウザが新しいHTMLファイルをサーバーに要求し、その新しいHTMLで画面全体を置き換えます。ブラウザのアドレスバーのURLも、要求したファイルのパスに合わせて変化します。

SPAでは、このHTMLファイルの要求・再読み込みを行いません。最初のページ読み込み時に、アプリケーションに必要なすべての（または多くの）JavaScriptコードがブラウザにダウンロードされます。その後の画面の切り替えは、ダウンロードされたJavaScriptコードが実行され、DOMの一部を書き換えることで行われます。

ここで問題になるのが、URLと表示されている画面の状態をどうやって同期させるか、です。

1. URLのアドレスバーの表示: 画面が切り替わっても、アドレスバーのURLが変わらなければ、ユーザーは現在どの画面を見ているのか分かりません。また、そのURLをブックマークしたり、他の人に共有したりすることができません。
2. ブラウザの「戻る」「進む」ボタン: ブラウザの「戻る」ボタンをクリックしたときに、アプリケーションは一つ前の画面状態に戻る必要があります。「進む」ボタンも同様です。ページ全体の再読み込みを伴わないSPAでは、この履歴管理を自分たちで行う必要があります。
3. 直接アクセス: ユーザーがブラウザのアドレスバーに直接 /products/123 のようなURLを入力してエンターキーを押した場合、アプリケーションはURLの情報を読み取って、対応する商品ID 123の詳細画面を正しく表示する必要があります。

これらの課題を解決し、SPAでも従来のWebサイトと同じようにURLベースのナビゲーションを可能にするのが、クライアントサイドルーティングライブラリの役割です。React Router DOMは、Reactアプリケーションでこのクライアントサイドルーティングを実現するための、最も一般的で強力なライブラリです。

React Router DOMとは何か？

React Router DOMは、Reactアプリケーションに宣言的なクライアントサイドルーティングを提供する標準的なライブラリです。

「宣言的ルーティング」とは、どのようなパスに対してどのコンポーネントを表示したいかを、「〜ならば〜を表示する」という具体的な手順ではなく、「パス/about が来たら About コンポーネントを表示する」のように、目的や状態を宣言的に記述することで実現する考え方です。Reactのコンポーネント指向と非常に相性が良いです。React Router DOMは、ルーティングに関する設定を特別なファイルに記述するのではなく、Reactコンポーネントとして記述します。

react-router と react-router-dom の違い

React Routerは、ルーティングのコア機能を提供するライブラリです。これは、Webだけでなく、React Nativeなどの他のプラットフォームでも使用できる、プラットフォーム非依存の機能を含んでいます。

一方、React Router DOM は、react-router のコア機能に加えて、Webブラウザ（DOM環境）でのルーティングに必要な機能（ブラウザの履歴APIとの連携、URLに基づいたナビゲーションなど）を追加したものです。Reactを使った通常のWebアプリケーション開発では、react-router-dom をインストールして使用します。この記事でも react-router-dom を扱います。

React Router DOMは、ブラウザの履歴API (pushState, replaceState など) を利用して、ページを再読み込みすることなくURLを変更し、履歴を管理します。そして、現在のURLに基づいて、どのReactコンポーネントをレンダリングすべきかを判断し、表示を切り替えます。

環境構築とインストール

React Router DOMを使うには、まずReactアプリケーションが必要です。まだReactアプリケーションを作成していない場合は、ViteまたはCreate React App (CRA) を使って新しいプロジェクトを作成しましょう。現在はViteを使うのが一般的で推奨されています。

Viteを使ったプロジェクト作成（推奨）:

bash
npm create vite@latest my-react-app --template react

または

bash
yarn create vite my-react-app --template react

または

bash
pnpm create vite my-react-app --template react

プロジェクトフォルダ（my-react-app）に移動し、依存関係をインストールします。

bash
cd my-react-app
npm install

または

bash
cd my-react-app
yarn install

または

bash
cd my-react-app
pnpm install

Create React Appを使ったプロジェクト作成（非推奨ですが、古いプロジェクトなどで使うこともあります）:

bash
npx create-react-app my-react-app

または

bash
yarn create react-app my-react-app

プロジェクトフォルダ（my-react-app）に移動します。

bash
cd my-react-app

React Router DOMのインストール

Reactプロジェクトの準備ができたら、次に react-router-dom をインストールします。プロジェクトフォルダのルートで以下のコマンドを実行してください。

bash
npm install react-router-dom

または

bash
yarn add react-router-dom

または

bash
pnpm add react-router-dom

これで、あなたのReactプロジェクトでReact Router DOMを使う準備が整いました。

基本的な使い方：最小構成を知る

React Router DOMを使ったクライアントサイドルーティングは、いくつかの主要なコンポーネントを組み合わせて実現されます。まずは最も基本的な構成を見ていきましょう。

必要な主要コンポーネント：

1. BrowserRouter: アプリケーション全体をラップし、ブラウザの履歴APIを使ってURLとUIを同期させます。React Router DOMを使うアプリケーションのルート（最上位）に配置する必要があります。
2. Routes: 複数の Route コンポーネントを囲むコンテナです。現在のURLにマッチする最初の Route を探し、その要素をレンダリングします。v6から導入されたコンポーネントで、以前のバージョンの Switch に相当しますが、より柔軟で効率的になっています。
3. Route: 特定のURLパスと、そのパスがマッチしたときに表示するコンポーネント（または要素）を紐付けます。path プロパティでマッチさせるURLを指定し、element プロパティでレンダリングするReact要素を指定します。
4. Link: クリックすると別のURLへナビゲートするためのコンポーネントです。ブラウザのページ遷移を使わずに、React Router DOMが内部でURLを変更し、対応するコンポーネントをレンダリングさせます。これはHTMLの <a> タグに似ていますが、SPA内でのスムーズな遷移のために使われます。

では、これらのコンポーネントを使った簡単な例を見てみましょう。

まず、表示するいくつかのシンプルなコンポーネントを作成します。例えば、Home.js, About.js, Contact.js の3つです。

“`javascript
// src/components/Home.js
import React from ‘react’;

function Home() {
return (

);
}

export default Home;
“`

“`javascript
// src/components/About.js
import React from ‘react’;

function About() {
return (

);
}

export default About;
“`

“`javascript
// src/components/Contact.js
import React from ‘react’;

function Contact() {
return (

);
}

export default Contact;
“`

次に、これらのコンポーネントをルーティングで切り替えるように設定します。通常は、アプリケーションのルートコンポーネント（例: src/App.js）や、ルーティングを設定したい特定の場所に記述します。

src/App.js を以下のように変更します。

“`javascript
// src/App.js
import React from ‘react’;
import { BrowserRouter, Routes, Route, Link } from ‘react-router-dom’;
import Home from ‘./components/Home’;
import About from ‘./components/About’;
import Contact from ‘./components/Contact’;

function App() {
return (
// BrowserRouterでアプリケーション全体をラップする

    <hr /> {/* 見た目の区切り線 */}

    {/* Routesコンポーネントの中でRouteを定義する */}
    {/* 現在のURLにマッチする最初のRouteがレンダリングされる */}
    <Routes>
      {/* path="/" にマッチしたら Home コンポーネントをレンダリング */}
      <Route path="/" element={<Home />} />

      {/* path="/about" にマッチしたら About コンポーネントをレンダリング */}
      <Route path="/about" element={<About />} />

      {/* path="/contact" にマッチしたら Contact コンポーネントをレンダリング */}
      <Route path="/contact" element={<Contact />} />
    </Routes>
  </div>
</BrowserRouter>

    <hr />

    {/* URLに応じたコンテンツ表示エリア */}
    <Routes> {/* Route定義のコンテナ */}
      <Route path="/" element={<Home />} /> {/* "/" にマッチしたら <Home /> を表示 */}
      <Route path="/about" element={<About />} /> {/* "/about" にマッチしたら <About /> を表示 */}
      <Route path="/contact" element={<Contact />} /> {/* "/contact" にマッチしたら <Contact /> を表示 */}
    </Routes>
  </div>
</BrowserRouter>

    <hr />

    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />

      {/* 動的なパスセグメント ":productId" を含むルート */}
      {/* 例: /products/123 や /products/abc にマッチする */}
      <Route path="/products/:productId" element={<ProductDetail />} />
    </Routes>
  </div>
</BrowserRouter>

  {/* フィルタリングボタン */}
  <div>
    <button onClick={() => handleFilterChange(null)}>全カテゴリ</button>
    <button onClick={() => handleFilterChange('electronics')}>電化製品</button>
    <button onClick={() => handleFilterChange('books')}>書籍</button>
  </div>

  {/* 商品一覧 */}
  <ul>
    {filteredProducts.map(product => (
      <li key={product.id}>
        {/* 個別商品詳細へのリンク（もしProductDetailルートがあるなら） */}
        {/* <Link to={`/products/${product.id}`}>{product.name}</Link> */}
        {product.name} ({product.category})
      </li>
    ))}
  </ul>
</div>

    <hr />

    <Routes>
      {/* ... 他のRoute ... */}

      {/* 商品リストへのルート */}
      {/* /products または /products?category=... にマッチ */}
      <Route path="/products" element={<ProductList />} />

      {/* ... ProductDetail ルートなど ... */}
    </Routes>
  </div>
</BrowserRouter>

// ここで実際の認証処理を行う（省略）
console.log('Login attempt with:', username, password);

// 認証成功と仮定して、ダッシュボードページへ遷移する
// navigate('/') または navigate('/dashboard') のように遷移先のパスを指定する
navigate('/'); // 例: ホームページへ遷移
// navigate('/dashboard'); // 例: ダッシュボードページへ遷移

    <hr />

    <Routes>
      {/* ... 他のRoute ... */}

      {/* ログインページへのルート */}
      <Route path="/login" element={<LoginForm />} />

      {/* ダッシュボードなど、ログイン後に遷移する可能性のあるルートも定義しておく */}
      {/* <Route path="/dashboard" element={<Dashboard />} /> */}
    </Routes>
  </div>
</BrowserRouter>

  <hr />

  {/* 子ルートがレンダリングされる場所 */}
  {/* URLが /dashboard/settings なら <DashboardSettings /> がここに表示される */}
  {/* URLが /dashboard/profile なら <DashboardProfile /> がここに表示される */}
  {/* URLが /dashboard または /dashboard/ なら、親Routeのindex要素（下記参照）がここに表示される */}
  <Outlet />
</div>

    <hr />

    <Routes>
      {/* ... 他のRoute ... */}

      {/* ダッシュボードの親ルート */}
      {/* path="/dashboard" にマッチしたら <DashboardLayout /> をレンダリング */}
      <Route path="/dashboard" element={<DashboardLayout />}>
        {/* ここにネストされた子ルートを定義 */}

        {/* index属性を持つRouteは、親パス (/dashboard) に正確にマッチした場合にレンダリングされる */}
        {/* /dashboard または /dashboard/ の場合に <DashboardSummary /> を表示 */}
        <Route index element={<DashboardSummary />} />

        {/* path="settings" は相対パス。親のパス (/dashboard) と組み合わされて /dashboard/settings になる */}
        <Route path="settings" element={<DashboardSettings />} />

        {/* path="profile" も相対パス。親のパス (/dashboard) と組み合わされて /dashboard/profile になる */}
        <Route path="profile" element={<DashboardProfile />} />

        {/* 子ルートにマッチしなかった場合のフォールバックも設定可能 */}
        {/* <Route path="*" element={<DashboardNotFound />} /> */}
      </Route>

    </Routes>
  </div>
</BrowserRouter>

    <hr />

    <Routes>
      {/* 通常のルート定義 */}
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      <Route path="/products/:productId" element={<ProductDetail />} />
      <Route path="/products" element={<ProductList />} />
      <Route path="/login" element={<LoginForm />} />
      {/* ネストされたルートもここより前に配置 */}
      <Route path="/dashboard" element={<DashboardLayout />}>
         {/* ... 子Route ... */}
      </Route>

      {/* --- ここからが重要 --- */}
      {/* どのパスにもマッチしなかった場合に、このルートがマッチする */}
      {/* 必ず Routes の最後の方に配置する */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  </div>
</BrowserRouter>

    <hr />

    <Routes>{/* ... Routeの定義 ... */}</Routes>
  </div>
</BrowserRouter>