使用 React 路由器挂钩访问路径参数

React 路由器提供了一个非常强大和灵活的API来管理前端应用程序的路由，其中包含了许多有用的挂钩函数来控制路由的导航和渲染。

如果您的应用程序需要访问路由路径中的一个或多个参数，您可以使用 useParams hook 来方便地从当前路由中提取它们。

在函数式组件中使用 useParams

useParams 是一个 React 路由器提供的 hook，它会从当前路由路径中提取参数并返回一个键值对对象，其中键是参数的名称，值是参数的值。例如，如果路由路径为 /users/:userId，则可以使用以下代码来提取 userId 参数的值：

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

function User() {
  const { userId } = useParams();

  return (
    <div>
      <h2>User Detail</h2>
      <p>User ID: {userId}</p>
    </div>
  );
}

在上面的例子中，我们首先导入了 useParams hook，然后在组件中调用它。useParams 返回一个键值对对象，因此我们可以使用对象解构语法来提取 userId 参数的值。

注意，在路径中定义的参数名称必须与 useParams 调用中使用的名称相匹配，否则将返回一个空对象。

在类组件中使用 withRouter

如果您正在使用类组件而不是函数式组件，则可以使用 withRouter 高阶组件来将路由参数注入到组件的 props 中。例如，以下是一个使用 withRouter 的类组件：

import React from 'react';
import { withRouter } from 'react-router-dom';

class User extends React.Component {
  render() {
    const { match } = this.props;
    const { userId } = match.params;

    return (
      <div>
        <h2>User Detail</h2>
        <p>User ID: {userId}</p>
      </div>
    );
  }
}

export default withRouter(User);

在上面的例子中，我们首先引入了 withRouter 高阶组件，然后在 User 类组件之前使用它进行装饰。这将在 User 组件中注入一个 match 对象，其中包含了路由参数，我们可以从 match.params 属性中提取它们。

尽管在函数式组件中使用 useParams 是更加通用和方便的方法，但在某些情况下，在类组件中使用 withRouter 可能会更加适合您的需求。

总结

通过使用 useParams hook 或 withRouter 高阶组件，我们可以方便地从当前路由路径中提取参数并在 React 组件中使用它们。这为我们的应用程序提供了更大的灵活性和可控性，使我们可以更好地管理路由和导航。