在react中用类组件获取路由参数

可以使用`react-router-dom`库中的`withRouter`高阶组件来获取路由参数。具体步骤如下：

1. 首先在组件中引入`withRouter`：

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

2. 然后将组件通过`withRouter`包装：

class MyComponent extends React.Component {
  // ...
}

export default withRouter(MyComponent);

3. 接着你就可以通过`this.props.match.params`获取路由参数了。例如，如果你的路由路径为`/user/:id`，那么可以通过`this.props.match.params.id`获取`id`参数的值。

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

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

export default withRouter(MyComponent);

相关问题

react 类组件 怎么获取路由参数

在 React 类组件中获取路由参数，需要使用 `react-router-dom` 中提供的 `withRouter` 高阶组件。

首先，确保你的 React 项目中已经安装了 `react-router-dom`，可以使用以下命令进行安装：

npm install react-router-dom

接下来，在需要获取路由参数的类组件中，使用 `withRouter` 包裹组件，并通过 `this.props.match.params` 获取路由参数。

例如，假设你的路由地址为 `/users/:userId`，你可以通过以下方式获取路由参数 `userId`：

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

class UserPage extends React.Component {
  render() {
    const userId = this.props.match.params.userId;
    return <div>当前用户 ID：{userId}</div>;
  }
}

export default withRouter(UserPage);

这样，就可以在类组件中获取到路由参数了。需要注意的是，使用 `withRouter` 高阶组件后，组件的 props 中会注入三个属性：`match`、`location` 和 `history`，其中 `match` 对象包含了路由参数等信息。

react函数式组件获取路由参数

在 React 中使用函数式组件获取路由参数可以通过两种方式实现。

1. 使用 React Router 提供的 `useParams` 钩子函数：

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

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

  // 使用 id 进行操作

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

在上述代码中，`useParams` 钩子函数返回一个对象，该对象包含了当前路由参数的键值对。在这个例子中，我们使用`{ id }`解构出了名为 `id` 的路由参数。

2. 使用 React Router 提供的 `withRouter` 高阶组件:

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

function MyComponent(props) {
  const { id } = props.match.params;

  // 使用 id 进行操作

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default withRouter(MyComponent);

在上述代码中，我们通过 `props` 对象的 `match.params` 属性获取了路由参数。`withRouter` 高阶组件将路由相关的属性注入到组件的 `props` 对象中，使得我们可以直接从 `props` 中访问路由参数。

这两种方式都可以用于函数式组件中获取路由参数，并且取决于你使用的 React Router 版本和个人喜好来选择。