react 阻止history.push 刷新页面

React 中可以使用 `history.pushState()` 方法来实现阻止 `history.push()` 刷新页面。具体步骤如下：

1. 在组件的 `constructor` 方法中，创建一个全局变量 `locationState`，用于保存当前页面的状态。

constructor(props) {
  super(props);
  this.locationState = {};
}

2. 在 `componentDidMount` 方法中，将当前页面的状态保存到 `locationState` 变量中。

componentDidMount() {
  this.locationState = window.history.state;
}

3. 在需要跳转页面的事件处理函数中，使用 `history.pushState()` 方法来实现跳转，并将当前页面的状态保存到 `locationState` 变量中。

handleClick = () => {
  const newState = { foo: 'bar' }; // 新状态
  window.history.pushState(newState, '', '/new-url'); // 跳转到新页面
  this.locationState = newState; // 保存新状态
}

4. 在组件的 `componentWillReceiveProps` 方法中，判断当前页面的状态是否与 `locationState` 变量中保存的状态相同，如果相同，则说明页面没有刷新，否则说明页面已经刷新，需要重新渲染组件。

componentWillReceiveProps(nextProps) {
  const { location } = this.props;
  const nextLocation = nextProps.location;
  if (nextLocation !== location) {
    const nextState = window.history.state;
    if (nextState === this.locationState) {
      // 页面没有刷新，不需要重新渲染组件
      return;
    }
    // 页面已经刷新，重新渲染组件
    this.locationState = nextState;
    this.setState({}); // 强制重新渲染组件
  }
}

通过以上步骤，就可以实现阻止 `history.push()` 刷新页面的效果了。