React Router: 概念と実践ガイド (パート 1)

React Router の究​​極ガイド: 概念と実践ガイド

はじめに

ルーティングは、最新の Web アプリケーションでは不可欠な機能です。これにより、ユーザーはさまざまなセクションやページ間をシームレスに移動でき、スムーズでインタラクティブなエクスペリエンスを実現できます。 React では、これは、シングル ページ アプリケーション (SPA) でルーティングを処理するように設計された強力なライブラリである React Router を使用して実現されます。

React Router は、動的ルートやネストされたルートの作成、URL パラメーターの処理、保護されたルートの実装などのプロセスを簡素化します。この包括的なガイドでは、React Router のあらゆる側面を検討し、その概念を段階的に分解し、実践的な例を使用して実装します。

---

React Router とは何ですか?

React Router は、React アプリケーションでルーティングを管理するための宣言型のコンポーネントベースのライブラリです。最新のアプローチを使用して URL をコンポーネントにマッピングするため、開発者はスケーラブルで動的な SPA を簡単に構築できます。

React Router の主な機能

1. 宣言型ルーティング: ルートをコンポーネントとして定義することで、ルーティング システムの理解と保守が容易になります。
2. 動的ルーティング: /user/:id などの URL 内の動的パラメータを処理して、柔軟で再利用可能なルートを作成します。
3. ネストされたルート: ルートを階層的に整理し、親子関係を有効にします。
4. 保護されたルート: 認証または認可の背後で特定のルートを保護します。
5. プログラムによるナビゲーション: ユーザーのアクションに基づいてプログラムによってページ間を移動します。
6. ブラウザ履歴のサポート: 進む、戻る、更新などのアクションを含む、ブラウザのナビゲーションと同期します。

---

React Router のインストール

始める前に、プロジェクトに React Router をセットアップしましょう。 npm または Yarn を使用してライブラリをインストールします:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

インストールしたら、React Router をアプリケーションに統合する準備が整います。

---

React Router の中心的な概念

React Router は、ルーティング システムの基礎を形成するいくつかの中心的な概念を中心に展開しています。段階的に詳しく見ていきましょう。

---

1. BrowserRouter と Router コンポーネント

React アプリケーションのトップレベルでは、すべてを Router 内にラップする必要があります。 React Router は複数のタイプのルーターを提供しますが、最も一般的なものは BrowserRouter で、ブラウザーの履歴 API を使用してナビゲーションを管理します。

BrowserRouter に関する重要なポイント

• ルーティングに必要なコンテキストを提供します。
• ブラウザの URL の変更をリッスンし、それに応じてコンポーネントを再レンダリングします。
• HashRouter などの他のタイプのルーターは、ナビゲーションのために URL にハッシュ (#) を使用しますが、最新のアプリケーションでは BrowserRouter の方が一般的に使用されます。

BrowserRouter の使用方法

BrowserRouter の基本的な使用例を次に示します。

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

説明:

• react-router-dom から BrowserRouter をインポートします。
• BrowserRouter コンポーネントはアプリケーション全体をラップしてルーティング機能を有効にします。

注: アプリケーションのルートに存在できる BrowserRouter は 1 つだけです。

---

2.ルートとルートコンポーネント

BrowserRouter でアプリをラップした後、Routes コンポーネントと Route コンポーネントを使用して個々のルートを定義します。

ルートとルートコンポーネントとは何ですか?

• ルート: アプリケーション内のすべてのルートのコンテナー。
• Route: 単一のルートを表し、以下を定義します。
  • path: 照合する URL パス。
  • 要素: パスが一致する場合にレンダリングする React コンポーネント。

基本的な例

import React from "react";
import { BrowserRouter } from "react-router-dom";

function App() {
    return (
        <BrowserRouter>
            <div>
                <h1>Welcome to My App</h1>
                <p>Routing starts here!</p>
            </div>
        </BrowserRouter>
    );
}

export default App;

説明:

1. path="/": このルートはルート URL (/) と一致し、ホーム コンポーネントをレンダリングします。
2. path="/about": /about と一致し、About コンポーネントをレンダリングします。
3. URL が変更されると (/about など)、React Router は対応するコンポーネントを自動的にレンダリングします。

---

3. Link および NavLink コンポーネント

React アプリケーションでは、従来の を使用します。ナビゲーション用のタグにより、ブラウザはページをリロードします。 React Router は、ページを更新せずにシームレスなナビゲーションを実現する Link コンポーネントと NavLink コンポーネントを提供します。

リンクコンポーネント

リンク コンポーネントを使用すると、ページをリロードせずに URL を更新することでルート間を移動できます。

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

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

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

export default App;

説明:

• リンク は従来の を置き換えます。タグ。
• to プロパティを使用して宛先パスを指定します。

NavLink コンポーネント

NavLink コンポーネントは Link に似ていますが、アクティブかどうかに基づいてリンクのスタイルを設定できます。

import React from "react";
import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
    return <h1>Home Page</h1>;
}

function About() {
    return <h1>About Page</h1>;
}

function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    );
}

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

export default App;

主な違い:

• NavLink コンポーネントは、アクティブなリンクのスタイルを設定するために activeClassName (または isActive) プロパティを追加します。

---

すべてをまとめる

これらの概念を小さなアプリケーション例に組み合わせてみましょう:

# Using npm
npm install react-router-dom

# Using yarn
yarn add react-router-dom

出力:

• ホームページを表示するには、 / に移動します。
• /about に移動して、About ページを表示します。
• ページは再読み込みせずに動的に更新されます。

---

次のステップ

このパートでは、基本について説明しました。

1. React Router とは何か、そしてその仕組み。
2. BrowserRouter をセットアップしています。
3. Routes と Route を使用してルートを定義します。
4. Link と NavLink を使用してナビゲーションを追加します。

次の記事では、以下について説明します。

• ネストされたルーティング
• 動的ルート
• URL パラメーターの処理

このReact Router 究極ガイド シリーズの次回の記事もお楽しみに!

以上がReact Router: 概念と実践ガイド (パート 1)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。