React Router v の機能、セットアップ、ベスト プラクティスについて

React Router v6: 完全ガイド

React Router は、React アプリケーションのルーティングに使用される最も人気のあるライブラリです。これにより、URL に基づいてさまざまなコンポーネント間を移動できるようになり、ページ全体を再読み込みせずにコンテンツが更新されるシングルページ アプリケーション (SPA) エクスペリエンスが提供されます。 React Router v6 は最新のメジャー リリースであり、以前のバージョンと比較してさまざまな改善、簡素化、新機能が導入されています。

---

React Router v6 の主な機能と変更点

1. 簡易 API

   • React Router v6 では、ルートとナビゲーションを定義するためのよりシンプルで直感的な API が導入されており、v5 に存在していた多くの回避策が不要になります。

2. ルート要素 (要素)

   • v6 では、ルートはコンポーネントまたはレンダー プロップの代わりに要素プロップを使用するようになりました。これにより、レンダリングするコンポーネントを直接渡すことができます。
   • 古い (v5): コンポーネント={コンポーネント名}
   • 新規 (v6): element={}

3. ルートマッチング

   • ルート マッチングがより直感的になりました。 v6 では、ルートは正確に一致します。つまり、最適な一致が選択され、動的セグメントを処理するための「キャッチオール」ルートは必要なくなりました。
   • コンポーネントは に置き換えられ、URL に一致する最初のルートのみをレンダリングするために使用されます。

4. ネストされたルート

   • React Router v6 では、ネストされたルートの定義が簡単になります。ネストにレンダーまたは子を使用する代わりに、要素 prop を使用してネストされたルートを直接定義できるようになりました。

5. いいえ、より正確には

   • React Router v6 では、デフォルトですべてのルートが正確に一致するため、正確な一致を指定するために正確な prop を使用する必要はありません。

6. React ルーターフック

   • React Router v6 は、useNavigate、useParams、useLocation、useMatch、useNavigate などの新しいアーキテクチャに一致するようにフックを更新しました。

---

React Router v6 のセットアップ方法

React Router v6 の使用を開始するには、次の手順に従ってください:

1. React Router v6 をインストールします

npm または Yarn を使用して React Router v6 をインストールできます。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

2.ルートとコンポーネントを定義する

React Router v6 で基本的なルーティングを設定する方法の例を見てみましょう。

ステップ 1: メインのアプリコンポーネントを定義する

npm install react-router-dom@6
# or
yarn add react-router-dom@6

• : これは を置き換えます。以前のバージョンのコンポーネント。これにより、最初に一致したルートのみがレンダリングされることが保証されます。
• } />: これは、ホームページのルートを定義し、Home コンポーネントをレンダリングします。
• : * ワイルドカードは、404 エラーまたは一致しないルートを処理するために使用され、URL がどのルートにも一致しない場合に NotFound コンポーネントをレンダリングします。

ステップ 2: 個別のコンポーネントを作成する

Home.js

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

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </Router>
  );
};

export default App;




<p><strong>.js について</strong><br>
</p>

<pre class="brush:php;toolbar:false">import React from 'react';

const Home = () => {
  return <h2>Home Page</h2>;
};

export default Home;

NotFound.js

import React from 'react';

const About = () => {
  return <h2>About Us</h2>;
};

export default About;

---

React Router v6 による動的ルーティング

ユーザー ID が URL の一部であるユーザー プロフィール ページなどの動的ルートを処理するために、React Router v6 は useParams フックを提供します。

ステップ 1: 動的ルートを定義する

import React from 'react';

const NotFound = () => {
  return <h2>Page Not Found</h2>;
};

export default NotFound;

説明:

• :userId は、ルート パス内の動的セグメントです。 useParams フックを使用すると、UserProfile コンポーネントの userId の値にアクセスできます。
• /user/123 に移動すると、UserProfile コンポーネントは userId を 123 としてレンダリングして表示します。

---

React Router v6 のネストされたルート

ネストされたルートを使用すると、親ルート内にサブルートを定義することで複雑なレイアウトを構築できます。

ステップ 1: 親ルートと子ルートを定義する

import React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extract the userId from the URL

  return <h2>User Profile for ID: {userId}</h2>;
};

const App = () => {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
};

export default App;

説明:

• ダッシュボード コンポーネントには、概要と設定用のネストされたルートが含まれています。
• 親ルートの /* により、すべての子ルートが /dashboard で処理されるようになります。

---

React Router v6 フック

React Router v6 には、ルーティング情報をナビゲートしてアクセスするためのいくつかのフックが導入されています。

1. useNavigate: プログラムで別のルートに移動します。
2. useParams: 動的 URL パラメーターにアクセスします。
3. useLocation: 現在の場所 (URL) に関する情報を取得します。
4. useMatch: 現在の URL を指定されたルートと照合します。
5. useResolvedPath: パスを絶対 URL に解決します。

例: useNavigate フック

useNavigate フックを使用すると、アプリケーション内でプログラムによるナビゲーションが可能になります。

npm install react-router-dom@6
# or
yarn add react-router-dom@6

---

React Router v6 のベスト プラクティス

• デフォルトで完全一致: React Router v6 はデフォルトでルートを正確に一致させるため、正確を指定しなくてもルート マッチングを簡単に処理できるようになります。
• 要素 Prop を使用する: コンポーネント prop を使用する代わりに JSX を要素 prop に直接渡し、コードを簡素化し、レンダリング関数の必要性を減らします。
• ネストされたルーティング: ネストされたルートを使用して、子ルートを持つ複雑なページ レイアウトを構築し、コードをモジュール化して保守しやすく保ちます。
• ワイルドカード ルートによる 404 の処理: ワイルドカード * を使用して、一致しないルートをすべてキャッチし、404 ページを表示するか、ユーザーをデフォルト ルートにリダイレクトします。

---

結論

React Router v6 では、よりシンプルな API、より優れたルート マッチング、動的ルートとネストされたルートのサポートの強化など、以前のバージョンに比べていくつかの改善が加えられています。 useNavigate、useParams、useLocation などのフックを活用することで、React アプリケーションで強力で柔軟なルーティング システムを構築できます。

---

以上がReact Router v の機能、セットアップ、ベスト プラクティスについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。