Reactルーティング入門｜ページ遷移の実装方法

Reactアプリケーションで複数のページを切り替えるには、React Routerというライブラリを使用します。SPAであるReactでは、ページ遷移時にブラウザのリロードが発生せず、高速な画面切り替えが実現できます。ここでは、React Routerを使ったルーティングの基本的な実装方法を解説します。

基本的な使い方

import React from 'react';
import { Routes, Route } from 'react-router-dom';

// ページコンポーネントのインポート
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import ProductDetail from './pages/ProductDetail';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

const AppRoutes = () => {
  return (
    <Routes>
      {/* メインページ */}
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route path='/products' element={<Products />} />
      <Route path='/products/:id' element={<ProductDetail />} />
      <Route path='/contact' element={<Contact />} />
      
      {/* 404ページ */}
      <Route path='*' element={<NotFound />} />
    </Routes>
  );
};

export default AppRoutes;

説明

Step 1React Routerとは

React Routerは、Reactアプリケーションでルーティング（ページ遷移）を実現するためのライブラリです。シングルページアプリケーション（SPA）で複数のページを扱う際に使用します。

まず、React Routerをインストールする必要があります：

npm install react-router-dom

基本的なコンポーネント：

• Routes: ルートの集まりを定義
• Route: 個々のルートとそのコンポーネントを定義
• Navigate: プログラムによるリダイレクトに使用

Step 2基本的なセットアップ

アプリケーションでReact Routerを使用するには、まず必要なコンポーネントをインポートし、アプリをBrowserRouterでラップします：

// index.js または App.js
import { BrowserRouter } from 'react-router-dom';

// Appコンポーネント全体をBrowserRouterでラップ
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Step 3ルートの定義

次に、Appコンポーネント内でルートを定義します：

// App.js
import { Routes, Route, Navigate } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import NotFound from './pages/NotFound';

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/404" element={<NotFound />} />
        <Route path="*" element={<Navigate to="/404" />} />
      </Routes>
    </div>
  );
}

このコードでは：

• path="/": ルートURL（トップページ）を表します
• element={<Home />}: 表示するコンポーネントを指定
• path="*": どのパスにも一致しない場合のフォールバック
• <Navigate to="/404" />: 404ページにリダイレクト

Step 4ナビゲーションリンクの作成

ページ間の遷移には、通常のaタグではなくLinkコンポーネントを使用します：

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">ホーム</Link></li>
        <li><Link to="/about">会社情報</Link></li>
        <li><Link to="/contact">お問い合わせ</Link></li>
      </ul>
    </nav>
  );
}

Linkコンポーネントはページの再読み込みを防ぎ、SPAの動作を維持します。

Step 5URLパラメータの使用

動的なルートパラメータを使用するには、パスにパラメータを指定し、useParamsフックで取得します：

// App.js - ルートの定義
<Route path="/products/:id" element={<ProductDetail />} />

// ProductDetail.js - パラメータの取得
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { id } = useParams();
  
  return (
    <div>
      <h1>商品詳細</h1>
      <p>商品ID: {id}</p>
      {/* 取得したIDを使って商品情報を表示 */}
    </div>
  );
}

まとめ