在 React 中使用 useParams Hook 访问动态路由参数-js教程-PHP中文网

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。