如何在跳转至外部URL前卸载组件，避免丢失未保存的修改？

问题根因 #

1. 跳转外部URL时整个页面会被浏览器直接卸载，React运行时会被销毁，所以类组件的componentWillUnmount生命周期本来就不会触发，属于预期行为。
2. 直接在beforeunload事件中调用Apollo的异步请求会被取消，是因为浏览器在执行beforeunload回调时已经准备销毁页面上下文，默认会终止所有未完成的常规异步请求（fetch/XMLHttpRequest），不会等待请求执行完成。

可选解决方案 #

方案1：拦截跳转提示用户确认（最常用，避免误操作） #

优先通过提示让用户选择是否离开，用户确认留下后可以手动保存内容，实现逻辑如下：

class Note extends React.Component {
  componentDidMount() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    // 内部路由跳转时移除监听，避免内存泄漏
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  }

  handleBeforeUnload = (e) => {
    // 自行实现未保存修改的判断逻辑，比如对比当前编辑内容和初始内容
    if (this.state.hasUnsavedChanges) {
      const tip = '你有未保存的笔记内容，离开将会丢失修改，确定要离开吗？';
      e.returnValue = tip;
      return tip;
    }
  }

  // 其他组件逻辑
}

浏览器会在用户尝试离开页面时弹出系统级确认框，用户选择「留下」就不会触发跳转，可以先保存内容再操作。

方案2：使用navigator.sendBeacon强制发送保存请求 #

如果需要在用户离开时自动静默保存，使用浏览器专门为页面卸载场景设计的sendBeaconAPI，该API会将请求加入浏览器后台队列，即使页面卸载也会尽量完成请求发送：

handleBeforeUnload = () => {
  if (!this.state.hasUnsavedChanges) return;

  // 构造GraphQL请求 payload
  const saveMutation = `
    mutation SaveNote($noteId: ID!, $content: String!) {
      saveNote(noteId: $noteId, content: $content) { id }
    }
  `;
  const payload = JSON.stringify({
    query: saveMutation,
    variables: {
      noteId: this.state.noteId,
      content: this.state.editedContent
    }
  });
  const blob = new Blob([payload], { type: 'application/json' });
  // 发送请求，无需等待返回
  navigator.sendBeacon('/你的GraphQL接口地址', blob);
}

注意：该方案无法拿到请求返回结果，无法处理保存失败的场景，适合对保存成功率要求不高的场景。

方案3：拦截头部按钮的点击事件，保存完成后再跳转（体验最优） #

如果跳转按钮是你的应用内部可控的元素，不要直接绑定外部URL跳转，先拦截点击事件执行保存逻辑，完成后再跳转：

// 头部跳转按钮的点击回调
handleProductPageJump = async (e) => {
  e.preventDefault(); // 阻止默认跳转行为

  if (!this.state.hasUnsavedChanges) {
    window.location.href = '外部产品页面URL';
    return;
  }

  try {
    // 调用Apollo的mutation执行保存
    await this.props.saveNoteMutation({
      variables: {
        noteId: this.state.noteId,
        content: this.state.editedContent
      }
    });
    // 保存成功后跳转
    window.location.href = '外部产品页面URL';
  } catch (err) {
    const forceJump = window.confirm('笔记保存失败，离开将丢失所有未保存修改，是否确定离开？');
    if (forceJump) window.location.href = '外部产品页面URL';
  }
}

该方案可以完整拿到保存结果，支持保存失败的异常处理，用户体验最好。

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