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

在React开发中，react-router-dom是一个常用的路由库，用于实现前端路由功能。自定义提示组件是指在页面刷新或跳转时，为用户提供一个提示框，防止页面重载。

自定义提示组件可以通过以下步骤实现：

创建一个名为Prompt的组件，用于显示提示框。该组件可以包含一个文本信息和两个按钮，分别用于确认和取消操作。
在需要使用自定义提示组件的页面中，引入Prompt组件，并在路由配置中使用react-router-dom提供的Prompt组件包裹需要进行提示的路由。
在Prompt组件中，可以通过react-router-dom提供的withRouter高阶组件来获取路由信息，以便在用户点击确认按钮时执行相应的路由操作。

下面是一个示例代码：

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);

在上述示例代码中，我们创建了一个名为PromptComponent的组件，其中包含了一个自定义的提示框和一个按钮。当用户点击按钮时，会触发显示自定义提示框的操作。

在组件的生命周期方法中，我们使用window对象的beforeunload事件来监听页面刷新或关闭的操作。当用户进行这些操作时，会触发handleBeforeUnload方法，根据showPrompt状态来决定是否显示浏览器默认的提示框。

在自定义提示框中，用户可以选择确认或取消操作。确认操作会执行this.props.history.push方法，将用户导航到指定的路由；取消操作会将showPrompt状态设置为false，停留在当前路由。

这样，当用户在该页面进行页面刷新或跳转时，会先显示自定义的提示框，防止页面重载。

推荐的腾讯云相关产品：腾讯云服务器（CVM）、腾讯云负载均衡（CLB）、腾讯云对象存储（COS）等。你可以通过访问腾讯云官网（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用方式。