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 的回答。