Reactルーターを使用してReactアプリでルーティングを処理する方法
序章
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
次に、基本コンポーネントを追加します。
import React from 'react';
export default function Manatee() {
return <h2>Manatee</h2>;
}
ファイルを保存して閉じます。
次に、イッカクのコンポーネントを作成します。
- nano src/components/Narwhal/Narwhal.js
同じ基本コンポーネントを追加し、 <h2>
に Narwhal
:
import React from 'react';
export default function Narwhal() {
return <h2>Narwhal</h2>;
}
ファイルを保存して閉じます。
最後に、次のファイルを作成します Whale
:
- nano src/components/Whale/Whale.js
同じ基本コンポーネントを追加し、 <h2>
に Whale
:
import React from 'react';
export default function Whale() {
return <h2>Whale</h2>;
}
ファイルを保存して閉じます。 次のステップでは、ルートの接続を開始します。 今のところ、アプリケーションで基本コンポーネントをレンダリングします。
開ける App.js
:
- nano src/components/App/App.js
追加します <h1>
ウェブサイトの名前のタグ(Marine Mammals
)内部 <div>
とともに className
の wrapper
. これはテンプレートとして機能します。 ラッパーと <h1>
タグはすべてのページに表示されます。 フルアプリケーションでは、すべてのページに必要なナビゲーションバーまたはヘッダーコンポーネントを追加できます。
次の強調表示された行をファイルに追加します。
import React from 'react';
import './App.css';
function App() {
return (
<div className="wrapper">
<h1>Marine Mammals</h1>
</div>
);
}
export default App;
次に、インポート Manatee
内でレンダリングします <div>
. これは、ルートを追加するまでプレースホルダーとして機能します。
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
次に、内容を次のコードに置き換えます。 padding
の 20px
に .wrapper
クラス:
.wrapper {
padding: 20px;
}
ファイルを保存して閉じます。 これを行うと、ブラウザが更新され、基本コンポーネントが表示されます。
これで、他のコンポーネントを表示するために使用する基本的なルートコンポーネントができました。 ルーターがない場合は、 useStateHookを使用してコンポーネントを条件付きで表示できます。 しかし、これはユーザーに優れたエクスペリエンスを提供しません。 ユーザーがページを更新するたびに、ユーザーの選択は消えます。 さらに、アプリケーションの特定の状態をブックマークしたり共有したりすることはできません。 ルーターはこれらすべての問題を解決します。 ルーターはユーザーの状態を保持し、ユーザーが保存したり他のユーザーに送信したりできる明確なURLをユーザーに提供します。
このステップでは、React Routerをインストールし、基本的なコンポーネントを作成しました。 コンポーネントは、ルートごとに表示する個々のページになります。 次のステップでは、ルートを追加して、 <Link>
パフォーマンスの高いハイパーリンクを作成するコンポーネント。
ステップ2—ルートを追加する
このステップでは、ページごとに個別のルートを持つベースルーターを作成します。 コンポーネントが正しくレンダリングされるようにルートを注文し、 <Link>
ページの更新をトリガーしないハイパーリンクをプロジェクトに追加するコンポーネント。
このステップを完了すると、コンポーネントをルート別に表示するナビゲーションを備えたアプリケーションができあがります。
React Routerは、宣言型ルーティングフレームワークです。 つまり、標準のReactコンポーネントを使用してルートを構成します。 このアプローチにはいくつかの利点があります。 まず、Reactコードの標準的な宣言的性質に従います。 にたくさんのコードを追加する必要はありません componentDidMount
メソッドまたは内部 useEffect
針; ルートはコンポーネントです。 次に、他のコンポーネントをテンプレートとして使用して、コンポーネント内にルートを直感的に配置できます。 コードを読むと、ナビゲーションやフッターなどのグローバルビューに関連して動的コンポーネントがどこに収まるかが正確にわかります。
ルートの追加を開始するには、 App.js
:
- nano src/components/App/App.js
The <h1>
タグはグローバルページタイトルとして機能します。 すべてのページに表示する必要があるため、タグの後にルーターを構成します。
輸入 BrowserRouter
, Route
、 と Switch
から react-router-dom
. BrowserRouter
基本構成になります。 Switch
動的ルートをラップし、 Route
コンポーネントは特定のルートを構成し、レンダリングするコンポーネントをラップします。
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 などの他のストアがある場合は、それらのコンポーネントをルーターの外部に配置します。 これにより、どのルートのすべてのコンポーネントでも使用できるようになります。
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;
次に、 Switch
内部のコンポーネント BrowserRouter
. このコンポーネントは、JavaScript switchステートメントのように、正しいルートをアクティブにします。 の中に Switch
、を追加します Route
各ルートのコンポーネント。 この場合、次のルートが必要になります。 /manataee
, /narwhal
、 と /whale
. The Route
コンポーネントはかかります path
パラメータとして、子コンポーネントを囲みます。 ルートがアクティブになると、子コンポーネントが表示されます。
パスのルートを作成します /
レンダリングします Manatee
成分:
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 などの別のルートを試してみると、マナティーのコンポーネントが見つかります。
The Switch
コンポーネントは、そのパターンに一致する最初のルートをレンダリングします。 どのルートも一致します /
、したがって、すべてのページにレンダリングされます。 それはまた、順序が重要であることを意味します。 ルーターは一致するものを見つけるとすぐに終了するため、常に特定性の低いルートの前に特定性の高いルートを配置します。 言い換えると、 /whale
前に行くだろう /
と /whale/beluga
前に行くだろう /whale
.
ルートを記述されたルートのみに一致させ、子ルートには一致させない場合は、 exact
小道具。 例えば、 <Route exact path="/manatee">
一致します /manatee
、 だがしかし /manatee/african
.
のルートを更新します Manatee
コンポーネントから /manatee
、次に残りのコンポーネントをインポートし、それぞれのルートを作成します。
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 / にアクセスすると、 <h1>
いずれにも一致するルートがないため、タグがレンダリングされます Route
コンポーネント:
http:// localhost:3000 / whale にアクセスすると、 Whale
成分:
いくつかのコンポーネントができたので、ユーザーがページ間を移動するためのナビゲーションを作成します。
使用 <nav>
ページのナビゲーション部分を作成していることを示す要素。 次に、順序付けされていないリストを追加します(<ul>
)リストアイテム付き(<li>
)およびハイパーリンク(<a>
)各哺乳類について:
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
各リンクのイベントハンドラーは、デフォルトのアクションを防ぎます。 それは大変な作業になります。 代わりに、ReactRouterにはと呼ばれる特別なコンポーネントがあります Link
それはあなたのために仕事を処理します。 リンクタグが作成されますが、新しい場所をプッシュする際のデフォルトのブラウザの動作は防止されます。
の App.js
、 輸入 Link
から react-router-dom
. 次に、それぞれを交換します <a>
とともに Link
. また、を変更する必要があります href
に属性 to
小道具。
最後に、 <nav>
内部のコンポーネント BrowserRouter
. これにより、 Link
コンポーネントはによって制御されます react-router
:
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
フックと、を使用して動的URLから情報を読み取る方法 useParams
針。
この手順を完了すると、コンポーネント内のルート情報にアクセスする方法と、その情報を使用してコンポーネントを動的にロードする方法がわかります。
海洋哺乳類のアプリケーションに別のレベルを追加したいとします。 クジラにはたくさんの種類があり、それぞれの情報を表示することができます。 これを実現する方法には2つの選択肢があります。現在のルートを使用し、次のような検索パラメータを使用して特定のクジラの種類を追加できます。 ?type=beluga
. ベースURLの後に特定の名前を含む新しいルートを作成することもできます。 /whale/beluga
. このチュートリアルは、検索パラメーターから始めます。検索パラメーターは柔軟性があり、複数の異なるクエリを処理できるためです。
まず、さまざまなクジラの種のために新しいコンポーネントを作成します。
新しいファイルを開く Beluga.js
テキストエディタで:
- nano src/components/Whale/Beluga.js
追加します <h3>
名前のタグ Beluga
:
import React from 'react';
export default function Beluga() {
return(
<h3>Beluga</h3>
);
}
シロナガスクジラについても同じことをします。 新しいファイルを開く Blue.js
テキストエディタで:
- nano src/components/Whale/Blue.js
追加します <h3>
名前のタグ Blue
:
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
:
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
コンポーネント。 次に、というフックをインポートします useLocation
から react-router-dom
:
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>;
}
The useLocation
フックはあなたのページから位置情報を引き出します。 これはReactルーターに固有のものではありません。 The location
オブジェクトは、すべてのブラウザの標準オブジェクトです。 ブラウザコンソールを開いて次のように入力した場合 window.location
、URLに関する情報を含むオブジェクトを取得します。
位置情報には次のものが含まれていることに注意してください search
、ただし、などの他の情報も含まれます pathname
と完全 href
. The useLocation
フックがこの情報を提供します。 の中に Whale.js
、 useLocation
針。 Destructure結果を引き出す search
分野。 これは、次のようなパラメータ文字列になります ?type=beluga
:
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
正しい子コンポーネントをレンダリングするメソッド:
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の後に追加するのではなく、URLに移動します。 ?
. たとえば、クエリ/whale?type=blue
今になります /whale/blue
:
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
新しいルートの後のルートとして、または次のルートの前に追加できます /whale/:type
とともに exact
キーワード。
の新しいルートを追加します /whale/:type
を追加します exact
現在のルートへのプロパティ:
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
パラメータを使用して、子コンポーネントを条件付きでレンダリングします。
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
クジラのルートしかないように小道具:
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
. これを新しいルートの基礎として使用します。
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>
:
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シリーズのコーディング方法ページに戻ってください。