React中componentWillUnmount方法未触发问题求助

问题原因 #

componentWillUnmount仅在React主动卸载组件时触发，而页面刷新、直接修改URL并回车会导致整个浏览器页面重新加载，此时组件并非被React卸载，而是整个应用被重置，因此该生命周期方法不会执行。

解决思路 #

1. 处理页面刷新/直接URL跳转场景 #

通过监听浏览器的beforeunload事件，捕获页面刷新、关闭或直接URL跳转的行为：

class Project extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
    this.handleBeforeUnload = this.handleBeforeUnload.bind(this);
  }

  componentDidMount() {
    // 挂载时添加监听
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    console.log("hello, world!");
    // 卸载时移除监听，避免内存泄漏
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload(e) {
    // 执行页面即将卸载前的逻辑
    console.log("页面即将刷新、关闭或跳转");
    
    // 若需提示用户确认离开，可设置returnValue（不同浏览器表现略有差异）
    // e.returnValue = "您的修改可能未保存，确定要离开吗？";
  }

  // ... 其他组件逻辑
}

2. 确保路由切换时componentWillUnmount正常触发 #

如果通过React Router的导航（如Link组件、history.push）切换路由时也不触发，需检查以下几点：

• 确认所有路由被Switch组件包裹，Switch会仅渲染第一个匹配的路由，避免多个Route同时渲染导致Project组件未被卸载。
• 检查Route的exact属性是否正确配置：你的代码中/project路由使用了exact，确保其他路由不会匹配/project路径（比如避免存在不带exact的path="/"路由意外匹配所有路径）。
• 测试通过Link组件跳转到其他页面，观察控制台是否输出hello, world!，验证路由切换时组件卸载逻辑是否正常。

3. 额外注意事项 #

• 监听beforeunload时，务必在componentWillUnmount中移除事件监听，防止内存泄漏。
• beforeunload事件中执行的逻辑不能包含异步操作（如请求），因为浏览器会在事件触发后立即卸载页面，异步操作无法完成。若需保存数据，建议在用户操作时实时保存，而非依赖该事件。

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