React の useParams フックを使用して動的ルートパラメーターにアクセスする-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-12-21 01:20:09

オリジナル

522 人が閲覧しました

Accessing Dynamic Route Parameters with the useParams Hook in React

React でParams フックを使用する

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

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

useParams の仕組み

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

構文:

1	`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 />} />
      </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>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 />} />
      </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>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: オプションのパラメーターを使用してルートを定義する

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 />} />
      </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 フックを使用します。