点击浏览器前进后退按钮时React组件不触发componentWillUnmount如何解决

React 仅在组件被从DOM树中移除时才会触发componentWillUnmount，基于客户端路由的前进/后退操作如果没有卸载当前组件，就不会触发该生命周期，可通过以下方案实现仅在前进/后退时执行自定义逻辑：

核心逻辑 #

• 浏览器前进/后退操作会触发全局popstate事件，该事件仅在会话历史记录切换时触发，页面刷新不会触发该事件
• 页面刷新会单独触发beforeunload事件，两类事件互斥，可直接通过监听popstate实现仅在前进/后退时执行逻辑的需求

代码示例 #

类组件写法 #

class YourComponent extends React.Component {
  componentDidMount() {
    // 监听前进后退事件
    window.addEventListener('popstate', this.handlePopState);
  }

  componentWillUnmount() {
    // 移除事件监听，避免内存泄漏
    window.removeEventListener('popstate', this.handlePopState);
  }

  handlePopState = () => {
    // 这里写你需要执行的清理逻辑
    console.log('检测到浏览器前进/后退操作，执行自定义逻辑');
  }

  render() {
    // 你的组件渲染逻辑
    return <></>;
  }
}

函数组件写法 #

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    const handlePopState = () => {
      // 这里写你需要执行的清理逻辑
      console.log('检测到浏览器前进/后退操作，执行自定义逻辑');
    };

    window.addEventListener('popstate', handlePopState);
    // 组件卸载时移除监听
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  // 你的组件渲染逻辑
  return <div />;
}

补充说明 #

• 主动调用history.back()/history.forward()/history.go()触发的历史记录切换，也会触发该事件，符合预期
• 若使用React Router，也可通过框架提供的路由监听能力实现同等效果，核心逻辑一致
• 该逻辑不会在页面刷新时触发，完全匹配需求

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