react-router-dom中的自定义提示组件。防止页面重载

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

class PromptComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPrompt: false
    };
  }

  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload = (event) => {
    if (this.state.showPrompt) {
      event.preventDefault();
      event.returnValue = '';
    }
  };

  handleConfirm = () => {
    // 执行确认操作，如跳转到指定路由
    this.props.history.push('/target-route');
  };

  handleCancel = () => {
    // 执行取消操作，如停留在当前路由
    this.setState({ showPrompt: false });
  };

  render() {
    return (
      <div>
        <Prompt
          when={this.state.showPrompt}
          message="您确定要离开当前页面吗？"
        />
        {/* 自定义提示框 */}
        {this.state.showPrompt && (
          <div>
            <p>您确定要离开当前页面吗？</p>
            <button onClick={this.handleConfirm}>确认</button>
            <button onClick={this.handleCancel}>取消</button>
          </div>
        )}
        {/* 页面内容 */}
        <h1>这是一个需要提示的页面</h1>
        <button onClick={() => this.setState({ showPrompt: true })}>
          离开页面
        </button>
      </div>
    );
  }
}

export default withRouter(PromptComponent);