React の useParams フックを使用して動的ルート パラメーターにアクセスする

React でParams フックを使用する

useParams フックは React Router の一部であり、現在の URL から 動的パラメーター にアクセスするために使用されます。このフックは主に、ユーザー ID、製品 ID、またはルート パスに埋め込まれたその他の変数データなどの動的セグメントを含むルートがある場合に役立ちます。

たとえば、ブログを構築していて、その ID に基づいて特定の投稿を表示したい場合は、useParams を使用して URL から投稿 ID を取得し、対応する投稿を表示します。

---

useParams の仕組み

• useParams は、現在のルートからの動的パラメーターのキーと値のペアを含むオブジェクトを返します。
• オブジェクト内のキーはルート パラメーターの名前 (ルート パスで指定) に対応し、値は URL からの実際の値です。

構文:

const params = useParams();

戻り値:

• キーと値のペアを持つオブジェクト。キーはパラメータの名前、値は URL からのパラメータの値です。

---

例 1: useParams の基本的な使用法

ユーザー プロファイルを表示するルートがあるとします。ルートは /profile/:userId で、:userId は動的セグメントです。

ステップ 1: 動的パラメータを使用してルートを定義する

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

const App = () => {
  return (
    <router>
      <routes>
        <route path="/profile/:userId" element="{<UserProfile"></route>} />
      </routes>
    </router>
  );
};

export default App;

ステップ 2: useParams を使用して userId を抽出します

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

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

  return (
    <div>
      <h2 id="User-Profile">User Profile</h2>
      <p>Displaying details for user with ID: {userId}</p>
    </div>
  );
};

export default UserProfile;

説明:

• URL が /profile/123 の場合、useParams フックは { userId: '123' } を返します。
• userId は、UserProfile コンポーネントでそのユーザーの特定の情報を表示するために使用されます。

---

例 2: 複数のパラメーターの使用

ルートには複数の動的パラメータを含めることができ、useParams はそれらすべてを返します。

ステップ 1: 複数の動的パラメーターを使用してルートを定義する

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

const App = () => {
  return (
    <router>
      <routes>
        <route path="/post/:postId/comment/:commentId" element="{<PostDetail"></route>} />
      </routes>
    </router>
  );
};

export default App;

ステップ 2: useParams を使用して複数のパラメーターを抽出します

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

const PostDetail = () => {
  const { postId, commentId } = useParams(); // Extracts postId and commentId from the URL

  return (
    <div>
      <h2 id="Post-Details">Post Details</h2>
      <p>Post ID: {postId}</p>
      <p>Comment ID: {commentId}</p>
    </div>
  );
};

export default PostDetail;

説明:

• URL が /post/456/comment/789 の場合、useParams フックは { postId: '456', commentId: '789' } を返します。
• コンポーネントは、URL パラメータに基づいて投稿 ID とコメント ID を表示します。

---

例 3: useParams とオプションのパラメーターの使用

オプションで含めることができるパラメーターを含むルートを定義することで、オプションのパラメーターを処理することもできます。

ステップ 1: オプションのパラメーターを使用してルートを定義する

const params = useParams();

ステップ 2: useParams でオプションのパラメーターを処理する

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

const App = () => {
  return (
    <router>
      <routes>
        <route path="/profile/:userId" element="{<UserProfile"></route>} />
      </routes>
    </router>
  );
};

export default App;

説明:

• この場合、クエリ パラメーターはオプションです (ルート内の ? で示されます)。
• URL が /search/books の場合、useParams は { query: 'books' } を返します。
• URL が /search の場合、useParams は {} (つまり、クエリなし) を返し、「すべての結果を表示」というメッセージが表示されます。

---

useParams を使用する場合

• 動的ルート: 動的セグメント (/users/:userId、/products/:productId など) を含む URL 構造がある場合。
• データの取得: URL の動的な値に基づいてデータを取得する必要がある場合 (例: ユーザーのプロフィール、製品の詳細、ID によるブログ投稿の取得)。
• ネストされたルート: ネストされたルートに動的パラメーターがあり、URL から値を抽出する必要があるシナリオ。

---

useParams の制限

• State Not Persisted: useParams は URL からパラメーターのみを取得します。ルート変更後はそれらを保存または保存しません。パラメータを追跡する必要がある場合は、状態管理または他のフック (useState、useEffect など) を使用する必要がある場合があります。
• クエリ パラメータなし: クエリ パラメータ (?sort=asc など) を読み取る必要がある場合は、useParams の代わりに useLocation フックを使用します。

---

結論

useParams フックは、React コンポーネントの URL から動的パラメーターにアクセスするためのシンプルかつ効果的な方法です。これにより、動的ルートの操作がはるかに簡単になり、より柔軟で動的なアプリケーションを構築できるようになります。

---

以上がReact の useParams フックを使用して動的ルート パラメーターにアクセスするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。