React ナビゲーションチュートリアル | React Router | クライアントサイドルーティング

はじめに

このプロジェクトでは、React アプリケーションにおけるナビゲーション機能の実装方法を学びます。ナビゲーションバーとリンクを使って遷移できるページを備えたシンプルなアプリケーションを作成します。

👀 プレビュー

project preview

🎯 タスク

このプロジェクトでは、以下を学びます。

プロジェクトのセットアップと依存関係のインストール方法
ナビゲーションバーのメニューのナビゲーションを可能にするためのルートとルートマッチャーの追加方法
カードリストから個々のカードへのナビゲーションの追加方法

🏆 成果

このプロジェクトを完了すると、以下ができるようになります。

React Router を使ってクライアントサイドルーティングを処理する
React アプリケーションでリンクを作成し、異なるページ間を遷移する
React Router のstateオブジェクトを使ってコンポーネント間でデータを渡す

プロジェクトのセットアップ

このステップでは、プロジェクトのセットアップ方法と必要な依存関係のインストール方法を学びます。

コードエディタを開き、プロジェクトディレクトリに移動します。

├── public
├── src
│   ├── App.css
│   ├── App.js
│   ├── components
│   │   ├── Card.js
│   │   ├── Cards.js
│   │   └── Home.js
│   ├── index.css
│   ├── index.js
│   ├── reportWebVitals.js
│   └── setupTests.js
├── package-lock.json
└── package.json

次に、ターミナルでnpm installコマンドを使用して依存関係をダウンロードし、依存関係のダウンロードが完了するまで待った後、npm startコマンドを使用してプロジェクトを起動します。

プロジェクトが正常に起動したら、「Web 8080」をクリックしてブラウザでプレビューします。

ルートとルートマッチャーを追加する

このステップでは、ナビゲーションバーのメニューのナビゲーションを可能にするために、ルートとルートマッチャーを追加する方法を学びます。

src/index.js ファイルを開き、必要なモジュールをインポートします。

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

App コンポーネントを BrowserRouter コンポーネントでラップします。
```
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
```

src/App.js ファイルを開き、必要なコンポーネントとモジュールをインポートします。

import React from "react";
import { Route, Switch, Link } from "react-router-dom";
import { Home } from "./components/Home";
import { Cards } from "./components/Cards";
import { Card } from "./components/Card";
import "./App.css";

ナビゲーションメニューと異なるルートを処理するための Switch コンポーネントを追加します。

const App = () => {
  return (
    <div className="app">
      <header>
        <Link to="/" className="menu menu-1">
          homepage
        </Link>
        <Link to="/cards" className="menu menu-2">
          card page
        </Link>
      </header>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/cards" exact component={Cards} />
        <Route path="/cards/:id" component={Card} />
      </Switch>
    </div>
  );
};

Switch コンポーネントは、一度に 1 つのルートのみがレンダリングされることを保証し、Route コンポーネントは異なるルートとそれに対応するレンダリングするコンポーネントを定義します。

カードリストから個々のカードへのナビゲーションを追加する

このステップでは、カードリストページから個々のカードページにジャンプするコードを追加する方法を学びます。

src/components/Cards.js ファイルを開き、必要なモジュールをインポートします。
```
import React from "react";
import { Link } from "react-router-dom";
```

個々のカードページへのリンク付きのカードリストをレンダリングするコードを追加します。

export const Cards = () => {
  const colors = ["#26547c", "#ef476f", "#ffd166", "#06d6a0"];

  return (
    <div className="page cards">
      {colors.map((c, idx) => {
        return (
          <Link
            key={idx}
            to={{
              pathname: `/cards/${idx + 1}`,
              state: { bgColor: c }
            }}
          >
            <div
              className={`card card-${idx + 1}`}
              style={{ backgroundColor: c }}
            >
              Card {idx + 1}
            </div>
          </Link>
        );
      })}
    </div>
  );
};

Link コンポーネントは個々のカードページへのリンクを作成するために使用され、to プロップは Card コンポーネントに渡すパスと状態を指定するために使用されます。

src/components/Card.js ファイルを開き、必要なモジュールをインポートします。
```
import React from "react";
import { useParams, useLocation } from "react-router-dom";
```
個々のカードページをレンダリングするコードを追加します。
```
export const Card = () => {
  const { id } = useParams();
  const { state } = useLocation();

  return (
    <div
      className="page card-page"
      style={{ backgroundColor: state.bgColor }}
    >
      <p>Card {id}</p>
    </div>
  );
};
```
useParams フックは URL から id パラメータを取得するために使用され、useLocation フックは Cards コンポーネントから渡された state オブジェクトを取得するために使用されます。

これで、プロジェクトは完了です。完成した結果は以下のスクリーンショットに示されています。カードページをクリックするとカードリストページに移動し、各カードをクリックすると個々のカードページに移動します。

Navigation between card list and individual cards

まとめ

おめでとうございます！このプロジェクトを完了しました。技術力を向上させるために、LabEx でさらに多くの実験を行って練習してください。

React ナビゲーション機能の実装