如何知道 React 类组件中的当前路由

在 React 应用程序中，您可能需要知道当前的路由信息以与用户进行互动并更新应用程序状态。在类组件中，您可以使用 React Router 的 withRouter 高阶组件来获取当前路由的信息。

安装 React Router

在继续之前，请确保您已安装了 React Router。如果未安装，请使用以下命令进行安装：

npm install react-router-dom

安装完成后，您可以将 React Router 的组件导入并在应用程序中使用它们。

使用 withRouter

使用 withRouter 高阶组件包装您的组件，以便您可以访问当前的路由信息。在以下示例中，我们将在应用程序中的 Profile 组件中使用 withRouter。

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

class Profile extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, {this.props.match.params.name}!</h1>
      </div>
    );
  }
}

export default withRouter(Profile);

现在，我们可以从 props 中获取当前的路由信息并在组件中使用它。在上面的示例中，我们使用 this.props.match.params.name 获取路由参数。

获取路径信息

您可以使用其他属性从路由信息中获取有关路径的信息。以下是一些示例：

• this.props.match.url：当前URL的完整路径。
• this.props.match.path：当前路由的路径模式。
• this.props.match.params：URL参数对象。

结论

使用 React Router 和 withRouter 高阶组件，您可以轻松获取组件中的当前路由信息。这样，您就可以更新应用程序状态并与用户进行互动。