{/* ルート定義のセクション */}
  <Routes>
    {/* パスが "/" の場合に HomePage をレンダリング */}
    <Route path="/" element={<HomePage />} />

    {/* パスが "/about" の場合に AboutPage をレンダリング */}
    <Route path="/about" element={<AboutPage />} />

    {/* パスが "/contact" の場合に ContactPage をレンダリング */}
    <Route path="/contact" element={<ContactPage />} />

    {/* 上記のどのパスにもマッチしない場合に NotFoundPage をレンダリング */}
    <Route path="*" element={<NotFoundPage />} />
  </Routes>
</div>

);
}

export default App;
“`

Route コンポーネントには主に二つの重要なプロップがあります。

1. path: マッチさせたいURLのパスを指定します。/, /about, /contact のように記述します。特別なパスとして * は「任意のパスにマッチ」することを意味し、通常は他のどのルートにもマッチしなかった場合の404ページなどに使用します。
2. element: path がマッチした場合にレンダリングしたいReact要素（コンポーネントのインスタンス）を指定します。<HomePage /> のようにJSXで記述します。

<Routes> は、現在のURLに最もマッチする <Route> を探し、その element プロップで指定されたコンポーネントをレンダリングします。Routes はデフォルトで最も具体的なパスを優先的にマッチさせるため、以前のバージョンの exact プロップのような厳密なマッチングを指定する必要がほとんどの場合でなくなりました。例えば、/users/123 は /users/:id にマッチし、/users にはマッチしません（/users が存在するルートとして定義されていれば）。しかし、/users は /users/:id よりも具体的なパスではないため、/users にマッチする Route は /users/:id より 前に 定義されていなくても正しくマッチします。Routes が賢く処理してくれます。ただし、* ルート（404用）は他のどのルートにもマッチしないように、常に <Routes> の最後に配置するのが良い習慣です。

ナビゲーションの実装：ページ間の移動

React Router を使ってページ間を移動する方法はいくつかあります。最も一般的で推奨されるのは、Link コンポーネントを使用する方法です。プログラム的に遷移させたい場合は、useNavigate フックを使用します。

1. Link コンポーネントを使用したナビゲーション

<Link> コンポーネントは、HTMLの <a> タグに似ていますが、SPAのクライアントサイドルーティング向けに最適化されています。クリックしてもページの完全な再読み込みは行わず、History API を使用してURLを変更し、React Router がそれに応じてコンポーネントを切り替えます。

<Link> コンポーネントは to プロップを使用します。ここに遷移先のパスを指定します。

“`jsx
// src/components/Navigation.js

import React from ‘react’;
import { Link } from ‘react-router-dom’;
import ‘./Navigation.css’; // スタイルシート

function Navigation() {
return (

);
}

export default Navigation;
“`

この <Navigation> コンポーネントを App.js の <Routes> の上に配置することで、ユーザーはこれらのリンクをクリックしてページ間を移動できるようになります。

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

通常の <a> タグを使用すると、ブラウザは指定された href に従ってページの完全な再読み込みを行います。これはSPAの目的である高速な遷移と状態維持に反します。<Link> は、クリックイベントをインターセプトし、ブラウザのデフォルトの遷移を防ぎ、React Router の内部ルーティングメカニズムをトリガーします。これにより、UIの更新だけが行われ、ページの再読み込みは発生しません。

2. NavLink コンポーネントを使用したナビゲーション

<NavLink> は <Link> の特殊なバージョンです。現在アクティブなルートにマッチする場合に、自動的に特定のCSSクラスやスタイルを適用する機能を持っています。これにより、ナビゲーションバーで現在表示しているページに対応するリンクをハイライト表示するといったことが容易になります。

<NavLink> は <Link> の全てのプロップ（to など）に加えて、いくつかの追加プロップを持ちます。

• className: アクティブでない場合のクラス名を指定します。関数として渡すと、{ isActive: boolean } オブジェクトを受け取り、それに基づいてクラス名を動的に生成できます。
• style: アクティブでない場合のスタイルを指定します。関数として渡すと、{ isActive: boolean } オブジェクトを受け取り、それに基づいてスタイルを動的に生成できます。

最も一般的な使い方は、アクティブな場合に適用されるクラス名を指定することです。v6では activeClassName プロップは非推奨になり、className プロップに { isActive } オブジェクトを渡す関数として記述する方法が推奨されています。

“`jsx
// src/components/Navigation.js (NavLinkを使用するバージョン)

import React from ‘react’;
import { NavLink } from ‘react-router-dom’;
import ‘./Navigation.css’;

function Navigation() {
return (

);
}

export default Navigation;
“`

そして、対応するCSSを定義します。

“`css
/ src/components/Navigation.css /

.active-link {
font-weight: bold;
color: blue; / 例: アクティブなリンクの色を変える /
}
“`

これで、現在のURLが / なら「ホーム」リンクがハイライトされ、/about なら「アバウト」リンクがハイライトされるようになります。

注意点: / パスに対する NavLink は、他の全てのパス（/about, /contact など）にもマッチしてしまうため、isActive が常に true になることがあります。これを避けるためには、v6では end プロップを使用します。end を指定すると、そのパスが完全にマッチする場合のみアクティブになります。

“`jsx
isActive ? ‘active-link’ : ”}
end // このプロップを追加

ホーム

“`

これにより、/ の時だけ「ホーム」がアクティブになり、/about や /contact の時はアクティブにならなくなります。

3. useNavigate フックを使用したナビゲーション（プログラムによる遷移）

フォームの送信後、ユーザー登録の成功後、または特定の条件が満たされたときなど、ユーザーのアクションやアプリケーションのロジックに基づいてプログラム的にページ遷移を行いたい場合があります。このような場合、useNavigate フックを使用します。

useNavigate フックは、現在のロケーションを変更するための関数を返します。この関数は、遷移先のパスを引数に取ります。

“`jsx
// 例: フォーム送信後にホームページへ遷移するコンポーネント

import React, { useState } from ‘react’;
import { useNavigate } from ‘react-router-dom’;

function MyForm() {
const [value, setValue] = useState(”);
const navigate = useNavigate(); // useNavigate フックを使用

const handleSubmit = (event) => {
event.preventDefault();
// フォームの処理…
console.log(‘送信された値:’, value);

// 処理完了後、ホームページへ遷移
navigate('/');

// 遷移時に履歴を残さず、現在の履歴項目を置き換えたい場合
// navigate('/', { replace: true });

};

return (

);
}

export default MyForm;
“`

navigate 関数はいくつかの形式で呼び出せます。

• navigate('/path'): 指定されたパスに遷移します。これはブラウザの「進む」ボタンで戻れる、新しい履歴項目を追加します。
• navigate('/path', { replace: true }): 指定されたパスに遷移しますが、現在の履歴項目を置き換えます。これはユーザーが「戻る」ボタンを押しても、この遷移前のページには戻れなくなります。ログイン後のリダイレクトなど、特定の状況で役立ちます。
• navigate(-1): ブラウザの履歴を1つ戻ります（「戻る」ボタンと同じ）。
• navigate(1): ブラウザの履歴を1つ進みます（「進む」ボタンと同じ）。

useNavigate フックは関数コンポーネント内でしか使用できません。クラスコンポーネントでプログラム的なナビゲーションが必要な場合は、古い withRouter HOC (High-Order Component) またはコンテキストを使用する必要がありましたが、関数コンポーネントが主流の現在では useNavigate が標準的な方法です。

ルートパラメータの利用

SPAでは、特定のアイテム（ユーザー、商品など）の詳細ページを表示するために、URLにIDなどの識別子を含めることがよくあります。例えば、/users/123 の 123 や /products/abc の abc のような部分です。これらを「ルートパラメータ」と呼びます。React Router では、ルート定義でルートパラメータを簡単に指定し、コンポーネント内でその値を取得できます。

1. ルートパラメータの定義

<Route> の path プロップで、パラメータを定義する部分の前に : をつけます。

“`jsx
// src/App.js または ルート定義ファイル

import React from ‘react’;
import { Routes, Route } from ‘react-router-dom’;
import HomePage from ‘./pages/HomePage’;
import UserListPage from ‘./pages/UserListPage’;
import UserDetailPage from ‘./pages/UserDetailPage’; // 後で作成
import NotFoundPage from ‘./pages/NotFoundPage’;
import Navigation from ‘./components/Navigation’;

function App() {
return (

);
}

export default App;
“`

この例では、/users/:userId というパスを定義しました。:userId の部分は変数として扱われ、/users/123 や /users/abc といったパスにマッチします。マッチした際、:userId にはそれぞれの 123 や abc といった値が格納されます。

2. ルートパラメータの取得

マッチしたルートコンポーネント内で、URLからルートパラメータの値を取得するには useParams フックを使用します。

“`jsx
// src/pages/UserDetailPage.js

import React from ‘react’;
import { useParams } from ‘react-router-dom’;

function UserDetailPage() {
// useParams() を呼び出すと、ルートパラメータを格納したオブジェクトが返される
// この場合、{ userId: ‘…’ } の形式になる
const { userId } = useParams();

// ここで userId を使ってAPIからユーザーデータを取得したり、表示を切り替えたりする
// 例: fetchUser(userId);

return (

);
}

export default UserDetailPage;
“`

useParams フックは、ルート定義で指定したパラメータ名（例: userId）をキーとするオブジェクトを返します。上記の例では、パスが /users/123 であれば { userId: '123' } というオブジェクトが返され、分割代入で userId 変数に 123 が格納されます。

複数のパラメータを定義することも可能です。例えば、/products/:category/:productId と定義した場合、useParams() は { category: '...', productId: '...' } のようなオブジェクトを返します。

ネストされたルート (Nested Routes)

多くのアプリケーションでは、特定のセクション内でさらにサブページやサブビューを持つ複雑なルーティング構造が必要になります。例えば、ダッシュボード内に設定ページ、プロフィールページ、レポートページがある場合などです。React Router v6 は「ネストされたルート」をサポートしており、これを非常に自然に扱うことができます。

ネストされたルートとは、親となる <Route> の内部に、子となる <Route> を定義する構造です。これにより、URLセグメントが親ルートと子ルートの定義を組み合わせたものになります。

1. ネストされたルートの定義

親となる <Route> の内部に、子となる <Route> を定義します。この際、親ルートの path は省略できます（相対パスとして扱われます）。子ルートの path は、親ルートのパスに相対的に追加されます。

“`jsx
// src/App.js または ルート定義ファイル

import React from ‘react’;
import { Routes, Route } from ‘react-router-dom’;
import HomePage from ‘./pages/HomePage’;
import DashboardLayout from ‘./layouts/DashboardLayout’; // ダッシュボード全体のレイアウト
import DashboardHome from ‘./pages/dashboard/DashboardHome’; // /dashboard
import DashboardSettings from ‘./pages/dashboard/DashboardSettings’; // /dashboard/settings
import DashboardProfile from ‘./pages/dashboard/DashboardProfile’; // /dashboard/profile
import NotFoundPage from ‘./pages/NotFoundPage’;
import Navigation from ‘./components/Navigation’;

function App() {
return (

    {/* 親ルート: /dashboard */}
    {/* path="dashboard/*" のように * をつけると、このルートがそのサブパス全てにマッチすることを示唆しやすくなります */}
    <Route path="/dashboard/*" element={<DashboardLayout />}>
      {/* 子ルート */}
      {/* パスが "dashboard/" の場合、DashboardHome をレンダリング */}
      {/* index={true} は、親のパス(/dashboard)に正確にマッチした場合にレンダリングされるデフォルトの子ルートを示します */}
      <Route index element={<DashboardHome />} />

      {/* パスが "dashboard/settings" の場合、DashboardSettings をレンダリング */}
      <Route path="settings" element={<DashboardSettings />} />

      {/* パスが "dashboard/profile" の場合、DashboardProfile をレンダリング */}
      <Route path="profile" element={<DashboardProfile />} />

      {/* ダッシュボード内の404ページ（例: /dashboard/abcdef） */}
      <Route path="*" element={<NotFoundPage />} /> {/* または専用の DashboardNotFoundPage */}
    </Route>

    <Route path="*" element={<NotFoundPage />} /> {/* アプリケーション全体の404 */}
  </Routes>
</div>

  {/* UI要素からクエリパラメータを更新 */}
  <button onClick={() => handleCategoryChange('electronics')}>
    カテゴリ：電子機器
  </button>
  <button onClick={() => handleSortChange('price_desc')}>
    ソート：価格（降順）
  </button>
  <button onClick={handleRemoveCategory}>
    カテゴリフィルターを解除
  </button>

  {/* 商品リストの表示 */}
</div>

  {/* Suspense でラップして、lazy コンポーネントのロード中に表示するフォールバックを指定 */}
  <Suspense fallback={<div>Loading...</div>}>
    <Routes>
      <Route path="/" element={<HomePage />} />

      {/* lazy コンポーネントを element に指定 */}
      <Route path="/about" element={<AboutPage />} />
      <Route path="/contact" element={<ContactPage />} />

      {/* ネストされたlazyルートも可能 */}
      <Route path="/dashboard/*" element={<DashboardLayout />}>
        <Route index element={<DashboardHome />} />
        <Route path="settings" element={<DashboardSettings />} />
        <Route path="profile" element={<DashboardProfile />} />
        {/* ダッシュボード内の404も laz yにするならここも lazyRoute */}
      </Route>


      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  </Suspense>
</div>

// エラーがなければ子コンポーネントを通常通りレンダリング
return this.props.children;

      {/* 各ルートを ErrorBoundary でラップ */}
      <Route path="/about" element={<ErrorBoundary><AboutPage /></ErrorBoundary>} />
      <Route path="/contact" element={<ErrorBoundary><ContactPage /></ErrorBoundary>} />

      {/* ネストされたルートの場合、親ルートや子ルートそれぞれに ErrorBoundary を設定できる */}
      {/* 例: 親ルートに設定すると、ダッシュボードセクション全体のエラーを捕捉 */}
      <Route path="/dashboard/*" element={<ErrorBoundary><DashboardLayout /></ErrorBoundary>}>
         {/* 子ルートを個別にラップすることも可能 */}
         <Route index element={<DashboardHome />} />
         <Route path="settings" element={<DashboardSettings />} />
         <Route path="profile" element={<DashboardProfile />} />
      </Route>


      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  </Suspense>
</div>

  {/* メインコンテンツエリアにRoutesを配置 */}
  <main>
    <Routes>
      {/* 各ルート定義 */}
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
      {/* ルートパラメータ :postId を定義 */}
      <Route path="/posts/:postId" element={<PostPage />} />

      {/* 上記どのルートにもマッチしない場合の404 */}
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  </main>
</div>