首頁 >web前端 >js教程 >在 React 中使用 useParams Hook 存取動態路由參數

在 React 中使用 useParams Hook 存取動態路由參數

Mary-Kate Olsen
Mary-Kate Olsen原創
2024-12-21 01:20:09530瀏覽

Accessing Dynamic Route Parameters with the useParams Hook in React

React 中的 useParams Hook

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 />} />
      </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 步:使用選用參數定義路線

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

  • 動態路由:當您的 URL 結構包含動態段(例如 /users/:userId、/products/:productId)。
  • 取得資料:當您需要根據 URL 中的動態值取得資料時(例如,透過 ID 取得使用者的個人資料、產品詳細資料或部落格文章)。
  • 巢狀路由:巢狀路由有動態參數的場景,需要從URL中擷取值。

useParams 的限制

  • State Not Persisted:useParams 僅從 URL 檢索參數。路線更改後,它不會儲存或保留它們。如果您需要追蹤參數,您可能需要使用狀態管理或其他鉤子(例如 useState、useEffect)。
  • 無查詢參數:如果需要讀取查詢參數(例如?sort=asc),請使用useLocation鉤子而不是useParams。

結論

useParams 鉤子是一種從 React 元件中的 URL 存取動態參數的簡單而有效的方法。它使使用動態路由變得更加容易,並使您能夠建立更靈活和動態的應用程式。


以上是在 React 中使用 useParams Hook 存取動態路由參數的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn