MENU
  1. ホーム
  2. React
  3. React Routerを使ったマルチページアプリケーション構築完全ガイド

React Routerを使ったマルチページアプリケーション構築完全ガイド

React

React Routerは、Reactアプリケーションでのルーティングを管理するための強力なライブラリです。シングルページアプリケーション(SPA)として知られるReactアプリの中で、複数のページをスムーズに切り替える機能を提供します。本記事では、React Routerを活用してマルチページアプリケーション(MPA)を構築する方法を具体例を交えて解説します。このガイドを通じて、基本的なルーティング設定から高度な機能まで、包括的に学ぶことができます。

目次
  1. React Routerとは？その基本概念を理解しよう
    1. React Routerの主な機能
    2. SPAとReact Routerの関係
    3. React Routerの基本構造
  2. マルチページアプリケーション(MPA)の仕組みと特徴
    1. MPAの基本的な動作原理
    2. MPAとSPAの違い
    3. React RouterでのMPA風の構築
    4. MPA風のアプローチが適する場合
  3. React Routerを使ったルーティング設定の基礎
    1. 基本的なルーティング設定
    2. コードの詳細
    3. ルーティングの動作確認
    4. 基本ルーティング設定の利点
  4. ダイナミックルートを用いた柔軟なルーティング構築
    1. ダイナミックルートの基本
    2. パラメータの取得方法
    3. ダイナミックルートの活用例
    4. ダイナミックルートの利点
    5. 注意点
  5. パラメーターとクエリを活用するデータの受け渡し
    1. URLパラメーターとクエリ文字列の違い
    2. クエリ文字列の取得方法
    3. URLパラメーターとクエリ文字列の組み合わせ
    4. 実用例：検索結果ページの実装
    5. 活用のポイント
  6. サーバーサイドレンダリング(SSR)でのReact Routerの活用
    1. SSRが必要とされる場面
    2. React RouterでのSSR対応の基本
    3. StaticRouterの役割
    4. React RouterのSSR活用例
    5. SSRの利点
    6. 注意点
  7. エラー処理とフォールバックページの実装方法
    1. 基本的なエラー処理の考え方
    2. 404エラーのフォールバックページ
    3. データ取得エラーの処理
    4. ReactのError Boundaryでアプリケーションエラーを処理
    5. エラー処理のベストプラクティス
  8. 実用例：React Routerを活用したブログアプリの構築
    1. プロジェクトの基本構成
    2. ステップ1：ルートの定義
    3. ステップ2：ホームページの実装
    4. ステップ3：投稿詳細ページの実装
    5. ステップ4：404エラーページの実装
    6. 動作確認
    7. まとめ
  9. 演習問題：React Routerで新しいページを追加してみる
    1. 演習内容
    2. ステップ1：新しいコンポーネントの作成
    3. ステップ2：ルートの追加
    4. ステップ3：リンクの追加
    5. ステップ4：動作確認
    6. 演習のポイント
  10. まとめ

React Routerとは？その基本概念を理解しよう


React Routerは、Reactアプリケーション内でルートを管理し、URLに基づいてコンポーネントを動的にレンダリングするためのライブラリです。このライブラリを利用することで、ユーザーが異なるページにアクセスしているような体験を実現できます。

React Routerの主な機能

  • ルーティングの管理: URLに応じた適切なコンポーネントのレンダリングを行います。
  • 動的ルートマッチング: URLパラメータやクエリを活用して柔軟なルートを設定可能です。
  • ネストされたルート: 親子関係を持つページ構造を簡単に作成できます。

SPAとReact Routerの関係


React Routerは主にSPAで使用されます。SPAでは、すべてのページが1つのHTMLファイルにレンダリングされるため、ユーザーがページ間を移動する際にリロードを伴いません。このスムーズなページ遷移を実現する中心的な役割を担っているのがReact Routerです。

React Routerの基本構造


以下は、React Routerの基本的な使い方を示すコード例です：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}
  • <Router>: アプリ全体を包み込み、ルーティング機能を提供します。
  • <Routes>: 各ページを定義する<Route>コンポーネントをグループ化します。
  • <Route>: URLパスと表示するコンポーネントを対応付けます。

React Routerを理解することは、効率的なReact開発の第一歩です。以降のセクションでは、このライブラリを活用した具体的な手法を学んでいきます。

マルチページアプリケーション(MPA)の仕組みと特徴

マルチページアプリケーション(MPA)は、複数のHTMLファイルを持ち、各ページが独立してサーバーからロードされるアプリケーション構造です。これに対し、シングルページアプリケーション(SPA)は、一つのHTMLファイルで複数のビューを管理します。本セクションでは、MPAの仕組みと特徴を解説し、React Routerを活用してMPAを模倣する方法を見ていきます。

MPAの基本的な動作原理

  1. 各ページはサーバーから個別にロードされます。
  2. ページ遷移ごとに新しいHTMLファイルが送られるため、クライアントの状態がリセットされます。
  3. URLごとに異なるHTMLが提供されるため、SEOに優れた設計が可能です。

MPAとSPAの違い

特徴MPASPA
ページ構成複数のHTMLファイル単一のHTMLファイル
ページ遷移フルリロードが必要フルリロード不要 (JavaScriptで管理)
パフォーマンス初回ロードが速いが、ページ遷移が遅い初回ロードは遅いが、ページ遷移が速い
SEO対応優れている設定によってSEOに対応可能

React RouterでのMPA風の構築


React Routerを活用すると、MPAのようにURLごとに異なるページを表示しながら、SPAの利点を活用できます。これにより、サーバーからすべてのページをロードする必要がなくなり、スムーズなユーザー体験が提供可能です。

以下はReact Routerを使ったMPA風構築の例です：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/services" element={<Services />} />
      </Routes>
    </Router>
  );
}

MPA風のアプローチが適する場合

  • SEOが重要なプロジェクト（例: ブログやEコマースサイト）。
  • ページごとに明確な区切りが必要なケース。
  • 各ページの初回ロード時間を短縮したい場合。

このように、React Routerを活用すれば、MPAの利点を取り入れながらSPAの効率性を維持できます。次のセクションでは、具体的なルーティング設定方法を詳しく解説します。

React Routerを使ったルーティング設定の基礎

React Routerの基本的なルーティング設定を理解することで、効率的なナビゲーション機能を構築できます。本セクションでは、基本的なルーティング設定の手順を解説し、コード例を交えながら説明します。

基本的なルーティング設定


React Routerを使うには、まず以下の手順で環境を準備します。

  1. React Routerのインストール
    React Routerを使用するには、react-router-domパッケージをインストールします：
   npm install react-router-dom
  1. ルーティングの定義
    アプリケーションのルートを定義します。

以下は、シンプルなルーティング設定の例です：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

export default App;

コードの詳細

  • <Router>
    アプリケーション全体を包むコンポーネントで、React Routerの機能を有効にします。
  • <Routes>
    ルート定義をグループ化するコンテナ。複数の<Route>コンポーネントを含みます。
  • <Route>
    各ルートとコンポーネントを対応付けるために使用します。
  • path属性: 対応するURLパスを指定。
  • element属性: 表示するコンポーネントを指定。

ルーティングの動作確認


上記の設定で以下のURLにアクセスすると、それぞれ対応するコンポーネントが表示されます：

  • / → Homeコンポーネント
  • /about → Aboutコンポーネント
  • /contact → Contactコンポーネント

基本ルーティング設定の利点

  • 各コンポーネントを独立して管理可能。
  • URLに応じて適切なコンテンツを動的にレンダリングできる。
  • コードがシンプルで拡張性が高い。

この基本設定を理解した上で、次のセクションでは、動的ルートの構築方法を解説します。これにより、より柔軟なアプリケーション構築が可能になります。

ダイナミックルートを用いた柔軟なルーティング構築

ダイナミックルートを使用すると、URLパラメータを活用して特定のデータやページを動的に表示できます。これにより、Reactアプリケーションに柔軟性を持たせ、ユーザーエクスペリエンスを向上させることが可能です。

ダイナミックルートの基本


ダイナミックルートとは、URLの一部をパラメータとして定義し、その値に基づいて異なるデータやコンテンツを表示する仕組みです。

基本構文の例：

<Route path="/users/:id" element={<UserProfile />} />
  • :idの部分がダイナミックパラメータです。
  • この値はコンポーネント内で取得して利用できます。

パラメータの取得方法


React RouterのuseParamsフックを使って、URLパラメータを取得できます。

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

function UserProfile() {
  const { id } = useParams(); // URLから:idを取得

  return (
    <div>
      <h1>ユーザーID: {id}</h1>
      {/* IDに基づいてデータを表示 */}
    </div>
  );
}

動作例

  1. URLが/users/123の場合：idは123として取得されます。
  2. URLが/users/456の場合：idは456として取得されます。

ダイナミックルートの活用例


以下はブログアプリでのダイナミックルートの例です。

<Route path="/blog/:postId" element={<BlogPost />} />

BlogPostコンポーネントで投稿データを表示するコード例：

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

function BlogPost() {
  const { postId } = useParams();

  const posts = {
    1: "Reactの基本について",
    2: "React Routerの使い方",
    3: "React Hooksの詳細解説",
  };

  return (
    <div>
      <h1>ブログ投稿</h1>
      <p>{posts[postId] || "投稿が見つかりませんでした。"}</p>
    </div>
  );
}

ダイナミックルートの利点

  • ページ数に応じた個別のルート定義が不要。
  • URLから直接データを指定でき、ユーザー操作を簡素化。
  • サーバーやAPIと連携して、リアルタイムデータの表示が可能。

注意点

  • パラメータが存在しない場合や無効な値が渡された場合のエラーハンドリングを実装する。
  • 必要に応じてパラメータの検証やデフォルト値を設定する。

ダイナミックルートを活用することで、アプリケーションの柔軟性を大幅に向上させることができます。次のセクションでは、URLパラメータに加えてクエリ文字列の使用方法を解説します。

パラメーターとクエリを活用するデータの受け渡し

React Routerでは、URLパラメータに加えてクエリ文字列を使用することで、ページ間で柔軟にデータを受け渡すことができます。本セクションでは、パラメーターとクエリの違い、取得方法、実践的な活用例を解説します。

URLパラメーターとクエリ文字列の違い

特徴URLパラメータークエリ文字列
構造/path/:parameter/path?key=value
使用例データを一意に識別するIDなどフィルタリングやソートの条件など
取得方法useParamsuseLocationまたはライブラリで解析

クエリ文字列の取得方法


クエリ文字列を取得するには、React RouterのuseLocationフックを使用します。

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

function QueryExample() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const searchTerm = queryParams.get("search");
  const sortOrder = queryParams.get("sort");

  return (
    <div>
      <h1>クエリ文字列の例</h1>
      <p>検索条件: {searchTerm}</p>
      <p>ソート順: {sortOrder}</p>
    </div>
  );
}

動作例


URL: /example?search=React&sort=asc

  • searchTerm → React
  • sortOrder → asc

URLパラメーターとクエリ文字列の組み合わせ


パラメーターとクエリ文字列を組み合わせることで、柔軟なデータ受け渡しが可能です。

例: /blog/:postId?highlight=true

import { useParams, useLocation } from 'react-router-dom';

function BlogDetail() {
  const { postId } = useParams();
  const queryParams = new URLSearchParams(useLocation().search);

  const highlight = queryParams.get("highlight") === "true";

  return (
    <div>
      <h1>ブログ投稿 ID: {postId}</h1>
      {highlight && <p>この投稿は注目されています！</p>}
    </div>
  );
}

実用例：検索結果ページの実装

以下は、検索条件をクエリ文字列で受け取り、結果を動的に表示する例です。

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get("q");

  const results = ["React Router", "React Hooks", "React Context"].filter(item =>
    item.toLowerCase().includes(query?.toLowerCase() || "")
  );

  return (
    <div>
      <h1>検索結果</h1>
      <p>検索キーワード: {query}</p>
      <ul>
        {results.map((result, index) => (
          <li key={index}>{result}</li>
        ))}
      </ul>
    </div>
  );
}

URL: /search?q=React
結果: Reactに関連する検索結果が表示されます。

活用のポイント

  • URLパラメーターはページ固有のデータを識別するために使用。
  • クエリ文字列は検索条件やページ設定など、可変データの受け渡しに最適。
  • どちらも適切なエラーハンドリングとデフォルト値の設定を行うことで、堅牢なアプリケーションを構築可能。

次のセクションでは、React Routerをサーバーサイドレンダリング(SSR)と組み合わせた方法を解説します。これにより、SEOとパフォーマンスを向上させることができます。

サーバーサイドレンダリング(SSR)でのReact Routerの活用

サーバーサイドレンダリング(SSR)は、Reactアプリケーションをサーバー側で事前にレンダリングし、クライアントにHTMLを提供する技術です。これにより、SEOやパフォーマンスが向上し、ユーザーエクスペリエンスを改善できます。本セクションでは、SSRとReact Routerの統合方法を解説します。

SSRが必要とされる場面

  • SEOの向上: 検索エンジンのクローラーが事前に生成されたHTMLを取得できるため、SPAの弱点を補完します。
  • パフォーマンスの改善: 初回ロード時に完全なHTMLを提供し、ユーザーがすぐにコンテンツを確認可能。
  • 低速ネットワーク対応: クライアント側でのレンダリング負荷を軽減。

React RouterでのSSR対応の基本


React RouterをSSRで利用する場合、通常はStaticRouterを使用します。このコンポーネントは、サーバーサイドでルーティングを処理する際に使用されます。

SSRでの基本構成例

サーバーサイドの設定 (Node.js/Expressを例に使用)

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom/server';
import App from './App';

const app = express();

app.use(express.static('public'));

app.get('*', (req, res) => {
  const context = {};
  const appHTML = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  const html = `
    <!DOCTYPE html>
    <html>
      <head>
        <title>React SSR Example</title>
      </head>
      <body>
        <div id="root">${appHTML}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `;
  res.send(html);
});

app.listen(3000, () => {
  console.log('Server is running on http://localhost:3000');
});

クライアントサイドの設定

クライアントでは通常通りBrowserRouterを使用します：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.hydrate(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

StaticRouterの役割


StaticRouterは、サーバーサイドでルートの設定を可能にします。以下が主な特徴です：

  • locationプロパティ: リクエストされたURLを指定します。
  • contextプロパティ: ルーティング中に情報を格納するオブジェクトで、リダイレクトなどに使用。

React RouterのSSR活用例


以下は、ブログページの例です：

app.get('/blog/:id', (req, res) => {
  const context = {};
  const appHTML = renderToString(
    <StaticRouter location={req.url} context={context}>
      <App />
    </StaticRouter>
  );

  if (context.url) {
    res.redirect(301, context.url);
  } else {
    res.send(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>Blog Post</title>
        </head>
        <body>
          <div id="root">${appHTML}</div>
          <script src="/bundle.js"></script>
        </body>
      </html>
    `);
  }
});

SSRの利点

  • サーバーで生成されたHTMLにより、検索エンジンがページ内容を正確に把握可能。
  • 初回ロードのパフォーマンスが向上し、ユーザーは即座にコンテンツを確認できる。
  • 高度なルーティングロジックやリダイレクトもサーバーサイドで処理可能。

注意点

  • サーバーとクライアントの一致が必要 (renderToStringとhydrateで同期)。
  • サーバーリソースの負荷が高くなる場合があるため、キャッシュの活用を検討する。

React RouterをSSRと統合することで、SEO対応のReactアプリケーションを構築できます。次のセクションでは、エラー処理とフォールバックページの実装方法を解説します。

エラー処理とフォールバックページの実装方法

React Routerを使用するアプリケーションでは、適切なエラー処理を実装することで、ユーザーが予期しない状況でも快適にアプリを利用できるようにすることが重要です。本セクションでは、エラーハンドリングとカスタムフォールバックページの実装方法を解説します。

基本的なエラー処理の考え方


React Routerでエラー処理を行う場合、次の2つの状況を考慮します：

  1. 404エラー（ページが見つからない場合）
    指定されたURLに対応するルートが存在しない場合。
  2. その他のエラー（サーバーエラーやアプリケーションエラー）
    データ取得の失敗やコンポーネントのレンダリングエラーなど。

404エラーのフォールバックページ


React Routerで404エラーをハンドリングするには、ルートの最後にワイルドカードパスを設定します。

以下は404ページの設定例です：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function NotFound() {
  return <h1>404 - ページが見つかりません</h1>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} /> {/* ワイルドカードパス */}
      </Routes>
    </Router>
  );
}

export default App;

この設定により、登録されていないパスにアクセスした場合、NotFoundコンポーネントが表示されます。

データ取得エラーの処理


データ取得が失敗した場合には、エラーメッセージやリトライボタンを表示するフォールバックを実装します。

例：APIデータ取得のエラーハンドリング

import React, { useState, useEffect } from 'react';

function DataComponent() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then((response) => {
        if (!response.ok) {
          throw new Error('データ取得に失敗しました');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>読み込み中...</p>;
  if (error) return <p>エラー: {error}</p>;

  return (
    <div>
      <h1>データ</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

ReactのError Boundaryでアプリケーションエラーを処理


ReactのErrorBoundaryを使用して、アプリ全体で発生する予期しないエラーをキャッチします。

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Error caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>エラーが発生しました。もう一度お試しください。</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

このErrorBoundaryをアプリケーションのルートに適用します：

import React from 'react';
import ReactDOM from 'react-dom';
import ErrorBoundary from './ErrorBoundary';
import App from './App';

ReactDOM.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>,
  document.getElementById('root')
);

エラー処理のベストプラクティス

  1. ユーザーにフレンドリーなメッセージを表示する。
  2. エラー発生時に再試行やホームページへのリンクを提供する。
  3. サーバーログや分析ツールでエラーを追跡する仕組みを追加する。

これらのエラー処理を組み込むことで、Reactアプリケーションの信頼性が大幅に向上します。次のセクションでは、実用例としてReact Routerを活用したブログアプリの構築例を紹介します。

実用例：React Routerを活用したブログアプリの構築

React Routerを活用したブログアプリの構築を通じて、ルーティングやダイナミックパラメータの応用方法を学びます。この例では、以下の機能を備えたシンプルなブログアプリを作成します：

  1. ホームページで投稿の一覧を表示。
  2. 各投稿の詳細ページにアクセス可能。
  3. 404エラーページの実装。

プロジェクトの基本構成


ディレクトリ構造の例：

src/
  ├── components/
  │   ├── Home.jsx
  │   ├── PostDetail.jsx
  │   ├── NotFound.jsx
  ├── App.jsx
  ├── index.jsx

ステップ1：ルートの定義


App.jsxにReact Routerのルートを設定します。

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import PostDetail from './components/PostDetail';
import NotFound from './components/NotFound';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:id" element={<PostDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

export default App;

ステップ2：ホームページの実装


Home.jsxでは、投稿一覧を表示し、投稿詳細ページへのリンクを作成します。

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

const posts = [
  { id: 1, title: 'Reactの基本', content: 'ReactはUI構築に特化したライブラリです。' },
  { id: 2, title: 'React Router入門', content: 'React Routerでルーティングを管理します。' },
];

function Home() {
  return (
    <div>
      <h1>ブログ投稿一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

ステップ3：投稿詳細ページの実装


PostDetail.jsxでURLパラメータを利用して投稿を表示します。

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

const posts = [
  { id: 1, title: 'Reactの基本', content: 'ReactはUI構築に特化したライブラリです。' },
  { id: 2, title: 'React Router入門', content: 'React Routerでルーティングを管理します。' },
];

function PostDetail() {
  const { id } = useParams();
  const post = posts.find((p) => p.id === parseInt(id, 10));

  if (!post) {
    return <h1>投稿が見つかりません</h1>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default PostDetail;

ステップ4：404エラーページの実装


存在しないページへのアクセス時に表示する404ページを作成します。

function NotFound() {
  return (
    <div>
      <h1>404 - ページが見つかりません</h1>
      <p>申し訳ありませんが、お探しのページは存在しません。</p>
    </div>
  );
}

export default NotFound;

動作確認

  • http://localhost:3000/: ホームページで投稿一覧を表示。
  • http://localhost:3000/post/1: 投稿ID 1の詳細ページを表示。
  • http://localhost:3000/invalid-path: 404エラーページを表示。

まとめ


このブログアプリの構築を通じて、以下の技術を学べます：

  • 基本的なReact Routerのルート設定。
  • ダイナミックルートとURLパラメータの活用。
  • エラーハンドリングとフォールバックページの実装。

次のセクションでは、演習問題として、新しい機能を追加する練習を行います。これにより、React Routerの理解がさらに深まります。

演習問題：React Routerで新しいページを追加してみる

React Routerの理解を深めるため、以下の演習問題に取り組んでみてください。この演習では、新しい機能やページを実装することで、React Routerの活用方法を実践的に学びます。

演習内容


以下の要件を満たす「プロフィールページ」を作成してください：

  1. /profileにアクセスすると、ユーザーの基本情報を表示するページを追加する。
  2. ホームページに「プロフィールページ」へのリンクを追加する。
  3. プロフィールページには、以下の情報を含める：
  • ユーザー名
  • メールアドレス
  • 自己紹介
  1. /profile以外の無効なルートにアクセスした場合は、404ページを表示する。

ステップ1：新しいコンポーネントの作成


Profile.jsxファイルを作成し、以下のコードを記述します：

function Profile() {
  const user = {
    name: "山田 太郎",
    email: "taro.yamada@example.com",
    bio: "フロントエンド開発者で、Reactを専門としています。",
  };

  return (
    <div>
      <h1>プロフィール</h1>
      <p><strong>名前:</strong> {user.name}</p>
      <p><strong>メール:</strong> {user.email}</p>
      <p><strong>自己紹介:</strong> {user.bio}</p>
    </div>
  );
}

export default Profile;

ステップ2：ルートの追加


App.jsxにProfileコンポーネントへのルートを追加します：

import Profile from './components/Profile';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/post/:id" element={<PostDetail />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
}

ステップ3：リンクの追加


ホームページに「プロフィールページ」へのリンクを追加します：

function Home() {
  return (
    <div>
      <h1>ブログ投稿一覧</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link to={`/post/${post.id}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
      <Link to="/profile">プロフィールページへ</Link> {/* プロフィールへのリンク */}
    </div>
  );
}

ステップ4：動作確認


以下の動作を確認してください：

  1. http://localhost:3000/profileで、プロフィールページが正しく表示される。
  2. ホームページの「プロフィールページへ」のリンクをクリックすると、プロフィールページが表示される。
  3. 無効なURL（例：/invalid）にアクセスすると404ページが表示される。

演習のポイント

  • React Routerで新しいページを追加する手順を学ぶ。
  • 既存のルート構造に新しいルートを組み込む方法を理解する。
  • ナビゲーションの追加やコンポーネント間の連携を強化する。

この演習を通じて、React Routerの柔軟性と拡張性を体感し、実際のプロジェクトでも役立つスキルを習得してください。次のセクションでは、全体のまとめを行います。

まとめ

本記事では、React Routerを使ったマルチページアプリケーション(MPA)の構築方法について詳しく解説しました。React Routerの基本的な使い方から、ダイナミックルート、URLパラメータ、クエリ文字列の活用、エラー処理、そしてサーバーサイドレンダリング(SSR)の応用まで、幅広い内容を網羅しました。

また、実用例としてブログアプリを構築し、新しいページの追加演習を通じて、React Routerの実践的なスキルを磨きました。これにより、以下のポイントを理解できたはずです：

  • 基本的なルート設定とネストされたルートの活用。
  • ダイナミックルートやパラメータの使い方による柔軟なアプリケーション設計。
  • エラー処理とフォールバックページの実装方法。
  • SSRによるSEOとパフォーマンス向上のメリット。

React Routerは、シングルページアプリケーション(SPA)やマルチページアプリケーション(MPA)を構築する上で非常に強力なツールです。この記事を基に、さらに高度なアプリケーションを開発してみてください。React Routerをマスターすることで、ユーザー体験を大きく向上させるアプリケーションを構築できるでしょう。

React
React マルチページアプリケーション React Router SPA

コメント

コメントする

目次
  1. React Routerとは？その基本概念を理解しよう
    1. React Routerの主な機能
    2. SPAとReact Routerの関係
    3. React Routerの基本構造
  2. マルチページアプリケーション(MPA)の仕組みと特徴
    1. MPAの基本的な動作原理
    2. MPAとSPAの違い
    3. React RouterでのMPA風の構築
    4. MPA風のアプローチが適する場合
  3. React Routerを使ったルーティング設定の基礎
    1. 基本的なルーティング設定
    2. コードの詳細
    3. ルーティングの動作確認
    4. 基本ルーティング設定の利点
  4. ダイナミックルートを用いた柔軟なルーティング構築
    1. ダイナミックルートの基本
    2. パラメータの取得方法
    3. ダイナミックルートの活用例
    4. ダイナミックルートの利点
    5. 注意点
  5. パラメーターとクエリを活用するデータの受け渡し
    1. URLパラメーターとクエリ文字列の違い
    2. クエリ文字列の取得方法
    3. URLパラメーターとクエリ文字列の組み合わせ
    4. 実用例：検索結果ページの実装
    5. 活用のポイント
  6. サーバーサイドレンダリング(SSR)でのReact Routerの活用
    1. SSRが必要とされる場面
    2. React RouterでのSSR対応の基本
    3. StaticRouterの役割
    4. React RouterのSSR活用例
    5. SSRの利点
    6. 注意点
  7. エラー処理とフォールバックページの実装方法
    1. 基本的なエラー処理の考え方
    2. 404エラーのフォールバックページ
    3. データ取得エラーの処理
    4. ReactのError Boundaryでアプリケーションエラーを処理
    5. エラー処理のベストプラクティス
  8. 実用例：React Routerを活用したブログアプリの構築
    1. プロジェクトの基本構成
    2. ステップ1：ルートの定義
    3. ステップ2：ホームページの実装
    4. ステップ3：投稿詳細ページの実装
    5. ステップ4：404エラーページの実装
    6. 動作確認
    7. まとめ
  9. 演習問題：React Routerで新しいページを追加してみる
    1. 演習内容
    2. ステップ1：新しいコンポーネントの作成
    3. ステップ2：ルートの追加
    4. ステップ3：リンクの追加
    5. ステップ4：動作確認
    6. 演習のポイント
  10. まとめ