React RouterでSPAのナビゲーション構築（第9回）

React Routerの基本概念

React Routerは、URLに基づいてコンポーネントを動的に表示するライブラリです。主要なコンポーネントには、ルーティングを管理するBrowserRouter、URLとコンポーネントをマッピングするRoute、ナビゲーションリンクを提供するLinkなどがあります。React Routerを使用すると、ユーザーがURLを変更したりリンクをクリックしたりしたときに、適切なコンポーネントがレンダリングされます。基本的なルーティングの例は以下の通りです。

import { BrowserRouter, Route, Routes } from 'react-router-dom';    
    
function App() {    
  return (    
    <BrowserRouter>    
      <Routes>    
        <Route path="/" element={<Home />} />    
        <Route path="/about" element={<About />} />    
      </Routes>    
    </BrowserRouter>    
  );    
}    

このコードでは、BrowserRouterでアプリケーション全体を囲み、RoutesとRouteでパスとコンポーネントを関連付けています。

環境準備：React Routerのインストール

React Routerを使用するには、まずライブラリをインストールします。第1回で作成したプロジェクト（my-react-app）で、ターミナルを開き、以下のコマンドを実行します。

npm install react-router-dom    

これにより、React Routerの最新バージョンがプロジェクトに追加されます。インストールが完了したら、ナビゲーションを実装する準備が整います。

ハンズオン：基本的なナビゲーションの構築

React Routerの基本を理解するため、ホームとアバウトページを持つSPAを構築します。srcフォルダ内に以下のファイルを作成します。

まず、src/Home.jsを作成します。

import React from 'react';    
    
function Home() {    
  return (    
    <div>    
      <h2>ホーム</h2>    
      <p>React Routerのナビゲーションへようこそ！</p>    
    </div>    
  );    
}    
    
export default Home;    

次に、src/About.jsを作成します。

import React from 'react';    
    
function About() {    
  return (    
    <div>    
      <h2>アバウト</h2>    
      <p>このアプリケーションはReact Routerで構築されています。</p>    
    </div>    
  );    
}    
    
export default About;    

続いて、src/App.jsを以下のように編集してルーティングを設定します。

import React from 'react';    
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';    
import Home from './Home';    
import About from './About';    
import './App.css';    
    
function App() {    
  return (    
    <BrowserRouter>    
      <div className="app-container">    
        <h1>React Routerナビゲーション</h1>    
        <nav>    
          <Link to="/" style={{ margin: '0 10px' }}>    
            ホーム    
          </Link>    
          <Link to="/about" style={{ margin: '0 10px' }}>    
            アバウト    
          </Link>    
        </nav>    
        <Routes>    
          <Route path="/" element={<Home />} />    
          <Route path="/about" element={<About />} />    
        </Routes>    
      </div>    
    </BrowserRouter>    
  );    
}    
    
export default App;    

このコードでは、BrowserRouterでルーティングを有効化し、Linkでナビゲーションリンクを、RoutesとRouteでパスとコンポーネントを定義しています。src/App.cssに以下のスタイルを追加して、UIを整えます。

.app-container {    
  text-align: center;    
  padding: 20px;    
  font-family: Arial, sans-serif;    
}    
    
nav {    
  margin: 20px 0;    
}    
    
nav a {    
  text-decoration: none;    
  color: #007bff;    
  font-size: 18px;    
}    
    
nav a:hover {    
  text-decoration: underline;    
}    

開発サーバー（npm start）が起動している状態で保存すると、ブラウザにナビゲーションメニューが表示されます。「ホーム」または「アバウト」をクリックすると、ページが再読み込みせずに適切なコンポーネントが表示されます。URLも/や/aboutに変化し、SPAの特徴が確認できます。

動的なルーティングの実装

React Routerでは、動的なURLパラメータを使用して、特定のリソースを表示できます。たとえば、ユーザーIDに基づいてユーザー情報を表示するページを追加します。src/User.jsを作成します。

import React from 'react';    
import { useParams } from 'react-router-dom';    
    
function User() {    
  const { userId } = useParams();    
    
  return (    
    <div>    
      <h2>ユーザー情報</h2>    
      <p>ユーザーID: {userId}</p>    
    </div>    
  );    
}    
    
export default User;    

App.jsを以下のように変更して、動的ルートを追加します。

import React from 'react';    
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';    
import Home from './Home';    
import About from './About';    
import User from './User';    
import './App.css';    
    
function App() {    
  return (    
    <BrowserRouter>    
      <div className="app-container">    
        <h1>React Routerナビゲーション</h1>    
        <nav>    
          <Link to="/" style={{ margin: '0 10px' }}>    
            ホーム    
          </Link>    
          <Link to="/about" style={{ margin: '0 10px' }}>    
            アバウト    
          </Link>    
          <Link to="/user/1" style={{ margin: '0 10px' }}>    
            ユーザー1    
          </Link>    
          <Link to="/user/2" style={{ margin: '0 10px' }}>    
            ユーザー2    
          </Link>    
        </nav>    
        <Routes>    
          <Route path="/" element={<Home />} />    
          <Route path="/about" element={<About />} />    
          <Route path="/user/:userId" element={<User />} />    
        </Routes>    
      </div>    
    </BrowserRouter>    
  );    
}    
    
export default App;    

このコードでは、useParamsフックを使用してURLパラメータuserIdを取得し、動的ルート/user/:userIdを定義しています。ブラウザで「ユーザー1」または「ユーザー2」をクリックすると、対応するユーザーIDが表示されます。URLが/user/1や/user/2に変化し、動的ルーティングが機能していることを確認できます。

ハンズオン：ナビゲーションの拡張

React Routerの柔軟性を体感するため、読者自身でナビゲーションをカスタマイズします。以下の課題を試してください。App.jsに404ページ（Not Found）を追加し、無効なURLにアクセスしたときに表示されるようにします。以下は一例です。

import React from 'react';    
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';    
import Home from './Home';    
import About from './About';    
import User from './User';    
import './App.css';    
    
function NotFound() {    
  return (    
    <div>    
      <h2>404: ページが見つかりません</h2>    
      <p>指定されたページは存在しません。</p>    
    </div>    
  );    
}    
    
function App() {    
  return (    
    <BrowserRouter>    
      <div className="app-container">    
        <h1>React Routerナビゲーション</h1>    
        <nav>    
          <Link to="/" style={{ margin: '0 10px' }}>    
            ホーム    
          </Link>    
          <Link to="/about" style={{ margin: '0 10px' }}>    
            アバウト    
          </Link>    
          <Link to="/user/1" style={{ margin: '0 10px' }}>    
            ユーザー1    
          </Link>    
          <Link to="/user/2" style={{ margin: '0 10px' }}>    
            ユーザー2    
          </Link>    
        </nav>    
        <Routes>    
          <Route path="/" element={<Home />} />    
          <Route path="/about" element={<About />} />    
          <Route path="/user/:userId" element={<User />} />    
          <Route path="*" element={<NotFound />} />    
        </Routes>    
      </div>    
    </BrowserRouter>    
  );    
}    
    
export default App;    

このコードでは、ワイルドカードパス*を使用して、定義されていないすべてのパスに対してNotFoundコンポーネントを表示します。ブラウザで/invalidのような存在しないURLにアクセスすると、404ページが表示されます。自分で新しいページ（例：コンタクトページ）やナビゲーションリンクを追加し、React Routerの機能を試してください。

次のステップに向けて

本記事では、React Routerを使用してSPAのナビゲーションを構築し、静的および動的ルーティングを実装しました。React Routerは、ユーザー体験を向上させる強力なツールです。第10回では、コンテキストAPIを活用してコンポーネント間でデータを共有し、グローバルな状態管理の基礎を学びます。これにより、アプリケーション全体でのデータ管理が効率化されます。