React中页面重载时跳转至其他页面的实现问题求助

我在React项目里尝试用onunload和onbeforeunload事件实现页面重载时跳转到其他页面，遇到了异常：首次重载时URL短暂变化后又回到当前页面，第二次重载才成功跳转。

我的测试代码 #

测试001：预期点击“离开页面”确认后立即跳转，但实际跳转后又返回原页面 #

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  useEffect(() => {
    const handleBeforeUnload = (event) => {
      // Prevent the default dialog box from showing
      event.preventDefault();
      // Redirect the user to the desired page
      history.push('/redirected-page');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

  // Rest of your component code...

  return (
    // JSX for your component...
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.0/react-dom.min.js"></script>

测试002：以为是时机问题，添加定时器后完全无法跳转 #

useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();

      // Delay the redirection by 100 milliseconds
      setTimeout(() => {
        history.push('/Applicant-profile');
      }, 100);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

问题根源 #

beforeunload事件的设计初衷是让浏览器确认用户是否要离开当前页面，而非执行页面跳转。在这个事件里调用history.push，浏览器的页面卸载流程会覆盖React Router的客户端跳转，导致跳转后又回到原页面。定时器方案失效是因为页面卸载流程启动后，setTimeout的回调会被浏览器直接丢弃，根本不会执行。

正确实现方式 #

如果要在页面重载（或用户主动离开）时跳转到指定页面，不能依赖beforeunload事件的回调执行客户端跳转，而是要通过修改window.location直接触发页面级跳转，同时处理确认逻辑：

import { useEffect } from 'react';

const MyComponent = () => {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      // 触发浏览器默认的离开确认弹窗
      event.preventDefault();
      event.returnValue = ''; // 兼容部分浏览器的必填字段
    };

    const handleUnload = () => {
      // 在页面开始卸载时，直接跳转目标页面
      window.location.href = '/redirected-page';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    window.addEventListener('unload', handleUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      window.removeEventListener('unload', handleUnload);
    };
  }, []);

  return (
    // 你的组件JSX
  );
};

注意事项 #

• beforeunload里仅用于触发确认弹窗，不要在这个事件里执行跳转逻辑，否则会被浏览器的卸载流程干扰。
• 跳转必须用window.location.href（或window.location.replace），不能用React Router的history.push，因为后者是客户端路由跳转，在页面卸载阶段会被浏览器忽略。
• 部分浏览器可能会限制unload事件里的同步操作，直接设置window.location是最可靠的方式。

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