使用 useParams 挂钩返回 React 路由中的动态路由参数

在 React 路由中，我们可以使用动态路由参数来传递数据。而在组件中获取这些动态路由参数，可以使用 useParams 挂钩。该挂钩可返回一个对象，该对象包含当前组件的所有动态路由参数。

使用方法

首先，在需要获取动态路由参数的组件中使用：

import { useParams } from "react-router-dom";

function MyComponent() {
  const { id } = useParams();

  return (
    <div>
      <h1>ID: { id }</h1>
    </div>
  );
}

export default MyComponent;

在上述示例中，我们首先导入 useParams 挂钩，然后在组件中调用该挂钩并将其返回的对象解构为一个单独的变量（例如 id）。

接下来，我们可以在组件中使用该变量来获取动态路由参数的值，例如 { id }。

示例

假设我们有一个帖子详情页面，其路由路径为 /posts/:postId，其中 postId 是动态路由参数。在该页面中，我们需要根据 postId 获取对应的帖子信息并渲染到页面上。

import { useParams } from "react-router-dom";

function PostDetails() {
  const { postId } = useParams();

  // 假设此处使用 API 获取帖子信息
  const post = fetch(`/api/posts/${postId}`).then(response => response.json());

  return (
    <div>
      <h1>Post ID: { postId }</h1>
      <h2>{ post.title }</h2>
      <p>{ post.content }</p>
    </div>
  );
}

export default PostDetails;

在上述示例中，我们首先获取动态路由参数 postId，然后使用 fetch 方法获取对应的帖子信息。最后，我们将帖子的标题和内容渲染到页面上。

总结

使用 useParams 挂钩可以方便地获取当前组件的动态路由参数，并用于组件的业务逻辑中。这种方式是在 React 路由中进行数据传输的一种便捷方式，可以帮助我们编写更加可读、可维护的代码。