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-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 Router v5 类组件获取路由参数的方式

在 React Router v5 中，获取路由参数的方式会略有不同。你可以通过以下步骤在类组件中获取路由参数：

1. 首先，确保你已经正确配置了 React Router，并在应用的根组件中包裹了 `<Router>` 组件。这样才能使路由参数在整个应用中可用。

2. 在类组件中，你可以通过 `this.props.match.params` 来访问路由参数。`match` 对象中的 `params` 属性是一个包含路由参数的对象。

下面是一个示例：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

class MyComponent extends React.Component {
  render() {
    const { id } = this.props.match.params; // 获取名为 "id" 的路由参数

    return (
      <div>
        <h1>My Component</h1>
        <p>路由参数: {id}</p>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>App</h1>
          <ul>
            <li>
              <Link to="/component/1">组件 1</Link>
            </li>
            <li>
              <Link to="/component/2">组件 2</Link>
            </li>
          </ul>

          <Route path="/component/:id" component={MyComponent} />
        </div>
      </Router>
    );
  }
}

export default App;

在上面的示例中，我们定义了一个 `MyComponent` 类组件，它通过 `this.props.match.params` 获取名为 "id" 的路由参数。然后，我们在 `App` 组件中使用 `<Route>` 组件来将 `MyComponent` 组件与 `/component/:id` 路径匹配。

通过这种方式，当访问 `/component/1` 或 `/component/2` 路径时，`MyComponent` 组件会被渲染，并可以获取到对应的路由参数。

请注意，上述示例是使用了 React Router v5 的方式获取路由参数。如果你正在使用 React Router v6，请参考之前我提供的关于 v6 的回答。