如何在JavaScript、React中拦截返回事件并阻止路由跳转？

我懂你现在的困扰——想在用户点击浏览器返回按钮时，先弹出确认提示，等用户确认后再允许路由跳转，但之前试的onpopstate和browserHistory.listen都没能拦住跳转，对吧？这两个方法失效其实是有原因的：onpopstate是历史记录已经改变后才触发的，所以调用preventDefault根本来不及阻止路由跳转；而browserHistory.listen只是监听路由变化的通知，本身没有提供阻止跳转的能力。

下面给你两个可靠的解决方案，优先推荐第一个：

这是React Router专门为路由跳转确认场景设计的组件，支持v4及以上版本（包括v5、v6），能自动处理浏览器返回、点击<Link>、编程式导航等所有路由跳转场景，非常省心。

举个实际使用的例子：

import { Prompt } from 'react-router-dom';
import { useState } from 'react';

function YourPageComponent() {
  // 用一个状态标记页面是否有未保存的内容（或者直接固定为true，强制每次返回都确认）
  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);

  return (
    <div>
      {/* 配置Prompt组件 */}
      <Prompt
        when={hasUnsavedChanges}  {/* 只有当这个条件为true时，才触发确认提示 */}
        message="你确定要离开吗？未保存的内容将会丢失。"
        // 也可以传函数自定义逻辑：message={(location) => `确定要跳转到${location.pathname}吗？`}
      />

      {/* 你的页面内容 */}
      <input 
        type="text" 
        onChange={() => setHasUnsavedChanges(true)} 
        placeholder="输入内容后返回会触发确认"
      />
    </div>
  );
}

当用户尝试返回或跳转到其他路由时，浏览器会自动弹出确认框，只有用户点击“确定”才会完成跳转，点击“取消”则留在当前页面。

如果你的项目用的是非常旧的React Router版本，或者是纯JavaScript项目，可以用这个手动干预历史记录的方式：

核心思路是：先给当前页面添加一条“占位”的历史记录，当用户点击返回时，先触发我们的确认逻辑，再根据用户选择决定是继续返回还是保留当前页面。

class YourComponent extends React.Component {
  componentDidMount() {
    // 先添加一条带标记的历史记录，作为我们的确认触发点
    window.history.pushState({ isConfirmBack: true }, document.title);

    // 监听popstate事件
    this.backListener = window.addEventListener('popstate', (event) => {
      if (event.state?.isConfirmBack) {
        // 弹出确认框
        const isConfirm = window.confirm("Are you sure you want to go back?");
        
        if (isConfirm) {
          // 用户确认返回：再执行一次back，回到真正的上一页
          window.history.back();
        } else {
          // 用户取消：把刚才移除的占位记录加回去，保持在当前页面
          window.history.pushState({ isConfirmBack: true }, document.title);
        }
      }
    });
  }

  componentWillUnmount() {
    // 移除事件监听，避免内存泄漏
    window.removeEventListener('popstate', this.backListener);
    
    // 清理我们添加的占位历史记录，避免影响其他页面
    if (window.history.state?.isConfirmBack) {
      window.history.back();
    }
  }

  render() {
    return <div>你的组件内容</div>;
  }
}

这个方法需要注意：在组件卸载时一定要清理监听和占位的历史记录，否则会影响其他页面的返回逻辑。

内容的提问来源于stack exchange，提问作者georgiana_e