react监听路由变化

在 React 中监听路由变化可以通过使用 React Router 提供的 withRouter 高阶组件来实现。

首先，在需要监听路由变化的组件中导入 withRouter：

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

然后，在组件的导出语句中使用 withRouter 包装组件：

export default withRouter(MyComponent);

之后，你就可以通过 props 访问到路由相关的信息和方法了。

例如，你可以在组件中使用 props.location.pathname 来获取当前路径名：

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        <p>当前路径名：{this.props.location.pathname}</p>
      </div>
    );
  }
}

export default withRouter(MyComponent);

你也可以在组件中使用 props.history.listen() 来监听路由变化，例如：

class MyComponent extends React.Component {
  componentDidMount() {
    this.unlisten = this.props.history.listen((location, action) => {
      console.log(`路由发生变化：${location.pathname}${location.search}${location.hash}`);
    });
  }

  componentWillUnmount() {
    this.unlisten();
  }

  render() {
    return (
      <div>
        <p>当前路径名：{this.props.location.pathname}</p>
      </div>
    );
  }
}

export default withRouter(MyComponent);

在 componentDidMount 中，我们使用 props.history.listen() 方法来监听路由变化，并在回调函数中打印出当前路径名、查询参数和哈希值。在 componentWillUnmount 中，我们取消监听路由变化。