如何在React JS中检测安卓/iOS手机返回键并弹出确认弹窗

嘿，这个需求其实挺常见的，咱们直接说重点：手机的返回键本质上是触发了浏览器的popstate事件，Node.js作为后端没法直接处理这个——毕竟它运行在服务器端，碰不到客户端的浏览器硬件按键事件，所以咱们用React前端来实现就好。

核心思路 #

当用户按下手机返回键时，浏览器会自动修改历史记录栈并触发popstate事件。我们要做的就是监听这个事件，拦截默认的后退行为，显示确认弹窗，再根据用户的选择决定是否真的后退。

函数组件实现示例 #

用React Hooks来写的话，我们可以借助useEffect监听事件，useState控制弹窗显示，useRef忽略页面首次加载的误触发：

import { useState, useEffect, useRef } from 'react';

const App = () => {
  const [showConfirmModal, setShowConfirmModal] = useState(false);
  // 标记是否是页面首次加载，避免初始时触发弹窗
  const isInitialMount = useRef(true);

  useEffect(() => {
    const handleBackButton = () => {
      // 忽略首次加载的情况
      if (isInitialMount.current) {
        isInitialMount.current = false;
        return;
      }

      // 恢复浏览器历史记录（因为返回键已经让页面后退了一步）
      window.history.pushState({}, document.title, window.location.href);
      // 显示确认弹窗
      setShowConfirmModal(true);
    };

    // 添加popstate事件监听
    window.addEventListener('popstate', handleBackButton);

    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('popstate', handleBackButton);
    };
  }, []);

  // 用户确认后退
  const handleConfirmExit = () => {
    window.history.back();
    setShowConfirmModal(false);
  };

  // 用户取消后退
  const handleCancelExit = () => {
    setShowConfirmModal(false);
  };

  return (
    <div className="app-container">
      {/* 这里放你的页面内容 */}
      <h1>我的响应式网站</h1>

      {/* 确认弹窗 */}
      {showConfirmModal && (
        <div className="confirm-modal">
          <div className="modal-content">
            <p>确定要离开当前页面吗？</p>
            <div className="modal-buttons">
              <button onClick={handleConfirmExit}>确定</button>
              <button onClick={handleCancelExit}>取消</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

export default App;

类组件实现示例 #

如果你还在用类组件，写法也类似：

import React, { Component } from 'react';

class App extends Component {
  state = {
    showConfirmModal: false
  };

  isInitialMount = true;

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

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

  handleBackButton = () => {
    if (this.isInitialMount) {
      this.isInitialMount = false;
      return;
    }

    window.history.pushState({}, document.title, window.location.href);
    this.setState({ showConfirmModal: true });
  };

  handleConfirmExit = () => {
    window.history.back();
    this.setState({ showConfirmModal: false });
  };

  handleCancelExit = () => {
    this.setState({ showConfirmModal: false });
  };

  render() {
    return (
      <div className="app-container">
        <h1>我的响应式网站</h1>

        {this.state.showConfirmModal && (
          <div className="confirm-modal">
            <div className="modal-content">
              <p>确定要离开当前页面吗？</p>
              <div className="modal-buttons">
                <button onClick={this.handleConfirmExit}>确定</button>
                <button onClick={this.handleCancelExit}>取消</button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

export default App;

关键细节说明 #

• 为什么要调用pushState？：当用户按下返回键，浏览器已经自动后退了一步，我们需要把当前页面重新加入历史栈，这样页面不会跳转，用户取消时就能停留在当前页面。
• 初始加载判断：部分浏览器在页面首次加载时会触发popstate事件，用useRef（函数组件）或实例变量（类组件）可以避免这种情况下误弹确认框。
• React Router兼容：如果你的项目用了React Router，上面的代码依然有效——因为React Router的导航也是基于浏览器的历史记录机制，popstate事件会正常触发。

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