react实现监听路由控制组件的位置

在React中，你可以使用`react-router-dom`库来管理路由。如果你想要监听路由变化并控制组件位置，可以使用`withRouter`高阶组件来实现。

首先，使用`withRouter`高阶组件包装你要监听路由变化的组件。这将会把`history`、`location`和`match`三个路由相关的属性注入到该组件的props中。

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

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

export default withRouter(MyComponent);

然后，在组件的`componentDidMount`生命周期方法中，添加一个路由变化的监听器，并在监听器中更新组件的位置。

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

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      position: 0
    };
  }

  componentDidMount() {
    window.addEventListener('popstate', this.handlePopState);
  }

  componentWillUnmount() {
    window.removeEventListener('popstate', this.handlePopState);
  }

  handlePopState = () => {
    const { location } = this.props;
    const position = location.state && location.state.position || 0;
    this.setState({ position });
  }

  render() {
    const { position } = this.state;
    return (
      <div style={{ position: 'absolute', top: `${position}px` }}>
        {/* ... */}
      </div>
    );
  }
}

export default withRouter(MyComponent);

在上面的例子中，我们在组件的state中维护了一个`position`属性，用于控制组件的位置。在`componentDidMount`生命周期方法中，我们添加了一个`popstate`事件监听器，该事件会在浏览器的前进或后退按钮被点击时触发。在`handlePopState`回调函数中，我们通过`location.state`获取到之前保存的位置信息，并将其更新到组件的state中。最后，在组件的render方法中，我们使用组件的state来控制组件的位置。