Reactルーターを使用してReactアプリでルーティングを処理する方法

著者は、 Creative Commons を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

React では、 routers は、Webアプリケーションを構成するさまざまなURLの作成とナビゲートに役立ちます。 これにより、ユーザーはアプリのコンポーネント間を移動しながら、ユーザー状態を維持できます。また、これらのコンポーネントに一意のURLを提供して、共有しやすくすることができます。 ルーターを使用すると、サイトナビゲーションを簡素化することで、アプリのユーザーエクスペリエンスを向上させることができます。

Reactルーターは、Reactで最も人気のあるルーティングフレームワークの1つです。 ライブラリは直感的なコンポーネントで設計されており、アプリケーションの宣言型ルーティングシステムを構築できます。 これは、どのコンポーネントに特定のルートがあるかを正確に宣言できることを意味します。 宣言型ルーティングを使用すると、人間が読める形式の直感的なルートを作成できるため、アプリケーションアーキテクチャの管理が容易になります。

このチュートリアルでは、Reactルーターをインストールして構成し、一連のルートを構築し、<Link>コンポーネントを使用してそれらに接続します。 また、コンポーネントでアクセスできるURLからデータを収集する動的ルートを構築します。 最後に、フックを使用して、データやその他のルーティング情報にアクセスし、親ルートによってレンダリングされるコンポーネント内に存在するネストされたルートを作成します。

このチュートリアルを終了すると、Reactプロジェクトにルートを追加し、ルートから情報を読み取って、URLデータに応答する柔軟なコンポーネントを作成できるようになります。

前提条件

• Node.jsを実行する開発環境が必要になります。 このチュートリアルは、Node.jsバージョン10.22.0およびnpmバージョン6.14.6でテストされました。 これをmacOSまたはUbuntu18.04にインストールするには、Node.jsをインストールしてmacOSにローカル開発環境を作成する方法またはのPPAを使用したインストール]セクションの手順に従います。 Ubuntu18.04にNode.jsをインストールする方法。
• Create React App でセットアップされたReact開発環境で、不要なボイラープレートが削除されています。 これを設定するには、ステップ1 —Reactクラスコンポーネントの状態を管理する方法のチュートリアルの空のプロジェクトを作成します。 このチュートリアルでは、プロジェクト名としてrouter-tutorialを使用します。
• チュートリアル全体を通して、Reactコンポーネントとカスタムフックを使用します。 コンポーネントについては、 Reactでカスタムコンポーネントを作成する方法で、フックについては、Reactコンポーネントのフックで状態を管理する方法で学ぶことができます。
• また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、HTMLシリーズを使用してWebサイトを構築する方法、CSSシリーズを使用してWebサイトを構築する方法にあります。 、およびJavaScriptでコーディングする方法。

ステップ1—Reactルーターのインストール

このステップでは、ReactRouterをベースプロジェクトにインストールします。 このプロジェクトでは、海洋哺乳類に関する小さなWebサイトを作成します。 各哺乳類には、ルーターでレンダリングする個別のコンポーネントが必要です。 ライブラリをインストールした後、哺乳類ごとに一連のコンポーネントを作成します。 このステップを完了すると、ルートに基づいてさまざまな哺乳類をレンダリングするための基盤が整います。

開始するには、ReactRouterパッケージをインストールします。 2つの異なるバージョンがあります。ReactNativeで使用するWebバージョンとネイティブバージョンです。 Webバージョンをインストールします。

ターミナルで、npmを使用してパッケージをインストールします。

npm install react-router-dom

パッケージがインストールされ、インストールが完了すると、このようなメッセージが表示されます。 メッセージは若干異なる場合があります。

Output...
+ [email protected]
added 11 packages from 6 contributors and audited 1981 packages in 24.897s

114 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

これでパッケージがインストールされました。 このステップの残りの部分では、それぞれが固有のルートを持つ一連のコンポーネントを作成します。

まず、マナティー、イッカク、クジラの3種類の哺乳類のディレクトリを作成します。 次のコマンドを実行します。

mkdir src/components/Manatee
mkdir src/components/Narwhal
mkdir src/components/Whale

次に、各動物のコンポーネントを作成します。 哺乳類ごとに<h2>タグを追加します。 完全なアプリケーションでは、子コンポーネントは必要に応じて複雑にすることができます。 独自の子コンポーネントをインポートしてレンダリングすることもできます。 このチュートリアルでは、<h2>タグのみをレンダリングします。

マナティーコンポーネントから始めます。 テキストエディタでManatee.jsを開きます。

nano src/components/Manatee/Manatee.js

次に、基本コンポーネントを追加します。

router-tutorial / src / components / Manatee / Manatee.js

import React from 'react';

export default function Manatee() {
  return <h2>Manatee</h2>;
}

ファイルを保存して閉じます。

次に、イッカクのコンポーネントを作成します。

nano src/components/Narwhal/Narwhal.js

同じ基本コンポーネントを追加し、<h2>をNarwhalに変更します。

router-tutorial / src / components / Narwhal / Narwhal.js

import React from 'react';

export default function Narwhal() {
  return <h2>Narwhal</h2>;
}

ファイルを保存して閉じます。

最後に、Whaleのファイルを作成します。

nano src/components/Whale/Whale.js

同じ基本コンポーネントを追加し、<h2>をWhaleに変更します。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';

export default function Whale() {
  return <h2>Whale</h2>;
}

ファイルを保存して閉じます。 次のステップでは、ルートの接続を開始します。 今のところ、アプリケーションで基本コンポーネントをレンダリングします。

App.jsを開きます：

nano src/components/App/App.js

wrapperのclassNameの<div>内に、Webサイトの名前（Marine Mammals）の<h1>タグを追加します。 これはテンプレートとして機能します。 ラッパーと<h1> タグはすべてのページにレンダリングされます。 フルアプリケーションでは、すべてのページに必要なナビゲーションバーまたはヘッダーコンポーネントを追加できます。

次の強調表示された行をファイルに追加します。

router-tutorial / src / components / App / App.js

import React from 'react';
import './App.css';
function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
    </div>
  );
}

export default App;

次に、Manateeをインポートし、<div>内にレンダリングします。 これは、ルートを追加するまでプレースホルダーとして機能します。

router-tutorial / src / components / App / App.js

import React from 'react';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <Manatee />
    </div>
  );
}

export default App;

ファイルを保存して閉じます。

すべてのコンポーネントが揃ったので、アプリケーションに少しスペースを与えるためにパディングを追加します。

App.cssを開きます：

nano src/components/App/App.css

次に、内容を、20pxのpaddingを.wrapperクラスに追加する次のコードに置き換えます。

router-tutorial / src / components / App / App.css

.wrapper {
    padding: 20px;
}

ファイルを保存して閉じます。 これを行うと、ブラウザが更新され、基本コンポーネントが表示されます。

これで、他のコンポーネントを表示するために使用する基本的なルートコンポーネントができました。 ルーターがない場合は、 useStateHookを使用してコンポーネントを条件付きで表示できます。 しかし、これはユーザーに優れたエクスペリエンスを提供しません。 ユーザーがページを更新するたびに、ユーザーの選択は消えます。 さらに、アプリケーションの特定の状態をブックマークしたり共有したりすることはできません。 ルーターはこれらすべての問題を解決します。 ルーターはユーザーの状態を保持し、ユーザーが保存したり他のユーザーに送信したりできる明確なURLをユーザーに提供します。

このステップでは、React Routerをインストールし、基本的なコンポーネントを作成しました。 コンポーネントは、ルートごとに表示する個々のページになります。 次のステップでは、ルートを追加し、<Link>コンポーネントを使用してパフォーマンスの高いハイパーリンクを作成します。

ステップ2—ルートを追加する

このステップでは、ページごとに個別のルートを持つベースルーターを作成します。 ルートを注文してコンポーネントが正しくレンダリングされるようにし、<Link>コンポーネントを使用して、ページの更新をトリガーしないハイパーリンクをプロジェクトに追加します。

このステップを完了すると、コンポーネントをルート別に表示するナビゲーションを備えたアプリケーションができあがります。

React Routerは、宣言型ルーティングフレームワークです。 つまり、標準のReactコンポーネントを使用してルートを構成します。 このアプローチにはいくつかの利点があります。 まず、Reactコードの標準的な宣言的性質に従います。 componentDidMountメソッドまたはuseEffectフック内に多くのコードを追加する必要はありません。 ルートはコンポーネントです。 次に、他のコンポーネントをテンプレートとして使用して、コンポーネント内にルートを直感的に配置できます。 コードを読むと、ナビゲーションやフッターなどのグローバルビューに関連して動的コンポーネントがどこに収まるかが正確にわかります。

ルートの追加を開始するには、App.jsを開きます。

nano src/components/App/App.js

<h1>タグは、グローバルページタイトルとして機能します。 すべてのページに表示する必要があるため、タグの後にルーターを構成します。

BrowserRouter、Route、およびSwitchをreact-router-domからインポートします。 BrowserRouterが基本構成になります。 Switchは動的ルートをラップし、Routeコンポーネントは特定のルートを構成し、レンダリングするコンポーネントをラップします。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <Manatee />
    </div>
  );
}

export default App;

BrowserRouterコンポーネントを追加して、ベースルーターを作成します。 このコンポーネント以外のものはすべてのページでレンダリングされるため、<h1>タグの後に配置してください。 さらに、使用するサイト全体のコンテキスト、または Redux などの他のストアがある場合は、それらのコンポーネントをルーターの外部に配置します。 これにより、どのルートのすべてのコンポーネントでも使用できるようになります。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <Manatee />
      </BrowserRouter>
    </div>
  );
}

export default App;

次に、BrowserRouter内にSwitchコンポーネントを追加します。 このコンポーネントは、JavaScript switchステートメントのように、正しいルートをアクティブにします。 Switch内に、ルートごとにRouteコンポーネントを追加します。 この場合、次のルートが必要になります：/manataee、/narwhal、および/whale。 Routeコンポーネントは、pathをパラメーターとして受け取り、子コンポーネントを囲みます。 ルートがアクティブになると、子コンポーネントが表示されます。

パス/のルートを作成し、Manateeコンポーネントをレンダリングします。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/">
            <Manatee />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存します。 これを行うと、ブラウザがリロードされ、マナティーコンポーネントの情報が表示されます。

http：// localhost：3000 / whale などの別のルートを試してみると、マナティーのコンポーネントが見つかります。

Switchコンポーネントは、そのパターンに一致する最初のルートをレンダリングします。 どのルートも/に一致するため、すべてのページにレンダリングされます。 それはまた、順序が重要であることを意味します。 ルーターは一致するものを見つけるとすぐに終了するため、常に特定性の低いルートの前に特定性の高いルートを配置します。 つまり、/whaleは/の前に配置され、/whale/belugaは/whaleの前に配置されます。

ルートを記述されたルートのみに一致させ、子ルートには一致させない場合は、exact小道具を追加できます。 たとえば、<Route exact path="/manatee">は/manateeと一致しますが、/manatee/africanとは一致しません。

Manateeコンポーネントのルートを/manateeに更新してから、残りのコンポーネントをインポートして、それぞれのルートを作成します。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <Switch>
          <Route path="/manatee">
            <Manatee />
          </Route>
          <Route path="/narwhal">
            <Narwhal />
          </Route>
          <Route path="/whale">
            <Whale />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存します。 これを行うと、ブラウザが更新されます。 http：// localhost：3000 / にアクセスすると、Routeコンポーネントのいずれにも一致するルートがないため、<h1>タグのみがレンダリングされます。

http：// localhost：3000 / whale にアクセスすると、Whaleコンポーネントが見つかります。

いくつかのコンポーネントができたので、ユーザーがページ間を移動するためのナビゲーションを作成します。

<nav>要素を使用して、ページのナビゲーション部分を作成していることを示します。 次に、各哺乳類のリスト項目（<li>）とハイパーリンク（<a>）を含む順序付けられていないリスト（<ul>）を追加します。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <nav>
        <ul>
          <li><a href="/manatee">Manatee</a></li>
          <li><a href="/narwhal">Narwhal</a></li>
          <li><a href="/whale">Whale</a></li>
        </ul>
      </nav>
      <BrowserRouter>
        ...
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存します。 これを行うと、ブラウザは更新されますが、問題が発生します。 ネイティブブラウザリンク（<a>タグ）を使用しているため、リンクをクリックするたびにデフォルトのブラウザ動作が得られます。 つまり、リンクをクリックするたびに、ページ全体の更新がトリガーされます。

リンクをクリックすると、ネットワークがすべてのJavaScriptファイルをリロードすることに注意してください。 これは、ユーザーにとって大きなパフォーマンスコストです。

この時点で、各リンクにclick イベントハンドラーを追加して、デフォルトのアクションを防ぐことができます。 それは大変な作業になります。 代わりに、ReactルーターにはLinkと呼ばれる特別なコンポーネントがあります。 リンクタグが作成されますが、新しい場所をプッシュする際のデフォルトのブラウザの動作は防止されます。

App.jsで、react-router-domからLinkをインポートします。 次に、各<a>をLinkに置き換えます。 また、href属性をto小道具に変更する必要があります。

最後に、<nav>コンポーネントをBrowserRouter内に移動します。 これにより、Linkコンポーネントがreact-routerによって制御されるようになります。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <nav>
          <ul>
            <li><Link to="/manatee">Manatee</Link></li>
            <li><Link to="/narwhal">Narwhal</Link></li>
            <li><Link to="/whale">Whale</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/manatee">
            <Manatee />
          </Route>
          <Route path="/narwhal">
            <Narwhal />
          </Route>
          <Route path="/whale">
            <Whale />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存します。 これを行うと、ブラウザが更新されます。 リンクをクリックしても、ページは更新されず、ブラウザはJavaScriptコードをリロードしません。

このステップでは、現在のプロジェクトにReactRouterを追加しました。 コンポーネントごとにルートを作成し、Linkコンポーネントを使用してナビゲーションを追加し、ページを更新せずにルートを切り替えました。

次のステップでは、URLパラメータを使用してさまざまなコンポーネントをレンダリングするより複雑なルートを追加します。

ステップ3—フックを使用したルートデータへのアクセス

このステップでは、URLクエリとパラメータを使用して動的ルートを作成します。 useLocationフックを使用して検索パラメーターから情報を取得する方法と、useParamsフックを使用して動的URLから情報を読み取る方法を学習します。

この手順を完了すると、コンポーネント内のルート情報にアクセスする方法と、その情報を使用してコンポーネントを動的にロードする方法がわかります。

海洋哺乳類のアプリケーションに別のレベルを追加したいとします。 クジラにはたくさんの種類があり、それぞれの情報を表示することができます。 これを実現する方法には2つの選択肢があります。現在のルートを使用し、?type=belugaなどの検索パラメーターを使用して特定のクジラの種類を追加できます。 /whale/belugaなど、ベースURLの後に特定の名前を含む新しいルートを作成することもできます。 このチュートリアルは、検索パラメーターから始めます。検索パラメーターは柔軟性があり、複数の異なるクエリを処理できるためです。

まず、さまざまなクジラの種のために新しいコンポーネントを作成します。

テキストエディタで新しいファイルBeluga.jsを開きます。

nano src/components/Whale/Beluga.js

<h3>タグをBelugaという名前で追加します。

router-tutorial / src / components / Whale / Beluga.js

import React from 'react';

export default function Beluga() {
  return(
    <h3>Beluga</h3>
  );
}

シロナガスクジラについても同じことをします。 テキストエディタで新しいファイルBlue.jsを開きます。

nano src/components/Whale/Blue.js

<h3>タグをBlueという名前で追加します。

router-tutorial / src / components / Whale / Blue.js

import React from 'react';

export default function Blue() {
  return(
    <h3>Blue</h3>
  );
}

ファイルを保存して閉じます。

検索パラメータを使用して追加情報を渡す

次に、クジラの情報を検索パラメータとして渡します。 これにより、新しいURLを作成しなくても情報を渡すことができます。

App.jsを開いて、新しいリンクを追加できるようにします。

nano src/components/App/App.js

2つの新しいリンクを追加します。1つは/whale?type=belugaに、もう1つは/whale?type=blueにリンクします。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <nav>
          <ul>
            <li><Link to="/manatee">Manatee</Link></li>
            <li><Link to="/narwhal">Narwhal</Link></li>
            <li><Link to="/whale">Whale</Link></li>
            <li><Link to="/whale?type=beluga">Beluga Whale</Link></li>
            <li><Link to="/whale?type=blue">Blue Whale</Link></li>
          </ul>
        </nav>
        <Switch>
          ...
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存して閉じます。

リンクをクリックすると、通常のクジラのページが表示されます。 これは、標準ルートがまだ正しく機能していることを示しています。

Whaleコンポーネントを正しくレンダリングしているので、コンポーネントを更新して検索クエリをURLから引き出し、それを使用して正しい子コンポーネントをレンダリングする必要があります。

Whale.jsを開きます：

nano src/components/Whale/Whale.js

まず、BelugaおよびBlueコンポーネントをインポートします。 次に、react-router-domからuseLocationというフックをインポートします。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';
import { useLocation } from 'react-router-dom';
import Beluga from './Beluga';
import Blue from './Blue';

export default function Whale() {
  return <h2>Whale</h2>;
}

useLocationフックは、ページから位置情報を取得します。 これはReactルーターに固有のものではありません。 locationオブジェクトは、すべてのブラウザの標準オブジェクトです。 ブラウザコンソールを開いてwindow.locationと入力すると、URLに関する情報を含むオブジェクトが表示されます。

位置情報にはsearchが含まれていますが、pathnameや完全なhrefなどの他の情報も含まれていることに注意してください。 useLocationフックがこの情報を提供します。 Whale.js内で、useLocationフックを呼び出します。 Destructure は、searchフィールドを引き出す結果です。 これは、?type=belugaなどのパラメータ文字列になります。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';
import { useLocation } from 'react-router-dom';
import Beluga from './Beluga';
import Blue from './Blue';

export default function Whale() {
  const { search } = useLocation();
  return <h2>Whale</h2>;
}

query-string など、検索を解析して、読みやすく更新しやすいオブジェクトに変換できるライブラリがいくつかあります。 この例では、正規表現を使用して、クジラtypeに関する情報を引き出すことができます。

検索文字列で.matchメソッドを使用して、type：search.match(/type=(.*)/)を引き出します。 正規表現内の括弧は、一致を結果arrayにキャプチャします。 配列の最初の項目は完全一致です：type=beluga。 2番目の項目は、括弧からの情報です：beluga。

.matchメソッドのデータを使用して、正しい子コンポーネントをレンダリングします。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';
import { useLocation } from 'react-router-dom';
import Beluga from './Beluga';
import Blue from './Blue';

export default function Whale() {
  const { search } = useLocation();
  const match = search.match(/type=(.*)/);
  const type = match?.[1];

  return (
    <>
      <h2>Whale</h2>
      {type === 'beluga' && <Beluga />}
      {type === 'blue' && <Blue />}
    </>
  );
}

シンボル?.は、オプションのチェーンと呼ばれます。 値が存在する場合は、値を返します。 それ以外の場合は、undefinedを返します。 これにより、検索パラメーターが空の場合にコンポーネントが保護されます。

ファイルを保存します。 これを行うと、ブラウザが更新され、さまざまなクジラがレンダリングされます。

URLパラメータへのアクセス

検索パラメータは機能しますが、この場合は最善の解決策ではありません。 通常、検索パラメータを使用してページを絞り込みます。情報の切り替えや特定のデータの読み込みです。 この場合、ページを洗練することはありません。 新しい静的ページを作成しています。 幸い、React Routerは、URLパラメーターと呼ばれる可変データを保持する動的URLを作成する方法を提供します。

App.jsを開きます：

nano src/components/App/App.js

クジラの情報を検索として渡す代わりに、URL自体に直接追加します。 つまり、?の後に検索を追加するのではなく、検索をURLに移動します。 たとえば、query/whale?type=blueは/whale/blueになります。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <nav>
          <ul>
            <li><Link to="/manatee">Manatee</Link></li>
            <li><Link to="/narwhal">Narwhal</Link></li>
            <li><Link to="/whale">Whale</Link></li>
            <li><Link to="/whale/beluga">Beluga Whale</Link></li>
            <li><Link to="/whale/blue">Blue Whale</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/manatee">
            <Manatee />
          </Route>
          <Route path="/narwhal">
            <Narwhal />
          </Route>
          <Route path="/whale">
            <Whale />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

次に、/whale/belugaと/whale/blueの両方をキャプチャできる新しいルートを作成する必要があります。 手作業で追加することもできますが、ユーザーのリストやその他の動的データがある場合など、事前にすべての可能性がわからない状況では機能しません。

それぞれのルートを作成する代わりに、現在のパスにURLパラメータを追加します。 URL paramは、先頭にコロンが付いたキーワードです。 React Routerはパラメーターをワイルドカードとして使用し、そのパターンを含むすべてのルートに一致します。

この場合、:typeのキーワードを作成します。 完全なpathは/whale/:typeになります。 これは、/whaleで始まるすべてのルートに一致し、typeというパラメーター変数内に変数情報を保存します。 このルートには追加のパラメーターが含まれていないため、/whaleとは一致しません。

/whaleを新しいルートの後のルートとして追加するか、exactキーワードを使用して/whale/:typeのルートの前に追加することができます。

/whale/:typeの新しいルートを追加し、exactプロパティを現在のルートに追加します。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <nav>
          <ul>
            <li><Link to="/manatee">Manatee</Link></li>
            <li><Link to="/narwhal">Narwhal</Link></li>
            <li><Link to="/whale">Whale</Link></li>
            <li><Link to="/whale/beluga">Beluga Whale</Link></li>
            <li><Link to="/whale/blue">Blue Whale</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/manatee">
            <Manatee />
          </Route>
          <Route path="/narwhal">
            <Narwhal />
          </Route>
          <Route exact path="/whale">
            <Whale />
          </Route>
          <Route path="/whale/:type">
            <Whale />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存して閉じます。 新しい情報を渡すので、それにアクセスし、その情報を使用して動的コンポーネントをレンダリングする必要があります。

Whale.jsを開きます：

nano src/components/Whale/Whale.js

useParamsフックをインポートします。 これにより、ルーターに接続し、URLパラメーターをオブジェクトに引き出します。 オブジェクトを分解して、typeフィールドを引き出します。 searchを解析するためのコードを削除し、パラメーターを使用して子コンポーネントを条件付きでレンダリングします。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';
import { useParams } from 'react-router-dom';
import Beluga from './Beluga';
import Blue from './Blue';

export default function Whale() {
  const { type } = useParams();

  return (
    <>
      <h2>Whale</h2>
      {type === 'beluga' && <Beluga />}
      {type === 'blue' && <Blue />}
    </>
  );
}

ファイルを保存して閉じます。 これを行うと、ブラウザが更新され、 http：// localhost：3000 / whale /belugaなどの新しいURLを使用できるようになります。

URLパラメータは、条件付きデータを渡すための明確な方法です。 これらは、組み合わせたり並べ替えたりできる検索パラメーターほど柔軟ではありませんが、検索エンジンがインデックスを作成するためのより明確で簡単です。

このステップでは、検索パラメーターとURLパラメーターを使用して変数データを渡しました。 また、useLocationおよびuseParamsフックを使用して、情報を引き出し、条件付きコンポーネントをレンダリングしました。

ただし、問題が1つあります。ルートのリストが長くなり、/whaleおよび/whale/:typeルートとの重複が発生し始めています。 React Routerを使用すると、子ルートをコンポーネント内で直接分割できます。つまり、リスト全体を1つのコンポーネントに含める必要はありません。 次のステップでは、ルートを子コンポーネント内に直接レンダリングします。

ステップ4—ネストルート

ルートは成長し、より複雑になる可能性があります。 React Routerはネストされたルートを使用して、子コンポーネント内でより具体的なルーティング情報をレンダリングします。 このステップでは、ネストされたルートを使用し、さまざまなコンポーネントにルートを追加します。 このステップの終わりまでに、情報をレンダリングするためのさまざまなオプションがあります。

最後のステップで、App.js内にルートを追加しました。 これにはいくつかの利点があります。すべてのルートを1つの場所に保持し、基本的にアプリケーションのサイトマップを作成します。 しかし、それは簡単に成長し、読み、維持するのが難しい場合があります。 ネストされたルートは、他のコンポーネントをレンダリングするコンポーネントにルーティング情報を直接グループ化し、アプリケーション全体でミニテンプレートを作成できるようにします。

App.jsを開きます：

nano src/components/App/App.js

/whale/:typeルートを削除し、exact支柱を削除して、クジラルートのみを作成します。

router-tutorial / src / components / App / App.js

import React from 'react';
import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
import './App.css';

import Manatee from '../Manatee/Manatee';
import Narwhal from '../Narwhal/Narwhal';
import Whale from '../Whale/Whale';

function App() {
  return (
    <div className="wrapper">
      <h1>Marine Mammals</h1>
      <BrowserRouter>
        <nav>
          <ul>
            <li><Link to="/manatee">Manatee</Link></li>
            <li><Link to="/narwhal">Narwhal</Link></li>
            <li><Link to="/whale">Whale</Link></li>
            <li><Link to="/whale/beluga">Beluga Whale</Link></li>
            <li><Link to="/whale/blue">Blue Whale</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route path="/manatee">
            <Manatee />
          </Route>
          <Route path="/narwhal">
            <Narwhal />
          </Route>
          <Route path="/whale">
            <Whale />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

ファイルを保存して閉じます。

次に、Whale.jsを開きます。 ここに、ネストされたルートを追加します。

nano src/components/Whale/Whale.js

2つのことをする必要があります。 まず、useRouteMatchフックで現在のパスを取得します。 次に、新しい<Switch>および<Route>コンポーネントをレンダリングして、正しいコンポーネントを表示します。

useRouteMatchをインポートします。 これにより、pathとurlを含むオブジェクトが返されます。 オブジェクトを分解してpathを取得します。 これを新しいルートの基礎として使用します。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';
import { useRouteMatch } from 'react-router-dom';
import Beluga from './Beluga';
import Blue from './Blue';

export default function Whale() {
  const { path } = useRouteMatch();

  return (
    <>
      <h2>Whale</h2>
      {type === 'beluga' && <Beluga />}
      {type === 'blue' && <Blue />}
    </>
  );
}

次に、SwitchとRouteをインポートして、新しいルートを追加できるようにします。 新しいルートはApp.jsで作成したものと同じになりますが、BrowserRouterでラップする必要はありません。 新しいルートを追加しますが、ルートの前にpathを付けます。 新しいコンポーネントは、配置した場所に正確にレンダリングされるため、<h2>の後に新しいルートを追加します。

router-tutorial / src / components / Whale / Whale.js

import React from 'react';
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import Beluga from './Beluga';
import Blue from './Blue';

export default function Whale() {
  const { path } = useRouteMatch();
  return (
    <>
      <h2>Whale</h2>
      <Switch>
        <Route path={`${path}/beluga`}>
          <Beluga />
        </Route>
        <Route path={`${path}/blue`}>
          <Blue />
        </Route>
      </Switch>
    </>
  );
}

ファイルを保存します。 これを行うと、ブラウザが更新され、子ルートにアクセスできるようになります。

これは少し余分なコードですが、子ルートを親と一緒に配置したままにします。 すべてのプロジェクトがネストされたルートを使用するわけではありません。明示的なリストを持つことを好むプロジェクトもあります。 それはチームの好みと一貫性の問題です。 プロジェクトに最適なオプションを選択すると、後でいつでもリファクタリングできます。

このステップでは、ネストされたルートをプロジェクトに追加しました。 useRouteMatchフックを使用して現在のパスを引き出し、コンポーネントに新しいルートを追加して、ベースコンポーネント内に新しいコンポーネントをレンダリングしました。

結論

ReactルーターはReactプロジェクトの重要な部分です。 シングルページアプリケーションを構築するときは、ルートを使用して、ユーザーが簡単かつ一貫してアクセスできる使用可能な部分にアプリケーションを分割します。

コンポーネントをルートに分割し始めると、コード分割、クエリパラメータによる状態の保持、およびユーザーエクスペリエンスを向上させるその他のツールを利用できるようになります。

Reactチュートリアルをもっと読みたい場合は、 Reactトピックページを確認するか、React.jsシリーズのコーディング方法ページに戻ってください。