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

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中文網其他相關文章！