React js中如何实现仅在用户从page3跳转至其他页面时执行代码

根据你使用的React Router版本，可选择对应实现方式，所有方案仅在从Page3跳转到其他页面时生效，不影响其他页面的正常跳转：

方案1：React Router v6.4+（当前主流版本） #

直接在Page3组件内使用官方提供的useBlocker钩子实现跳转前拦截，逻辑和页面耦合，不需要全局修改路由配置：

import { useBlocker } from 'react-router-dom';

const Page3 = () => {
  const blocker = useBlocker(({ nextLocation }) => {
    // 仅当跳转目标不是Page3时触发逻辑（当前组件是Page3，无需额外判断当前路径）
    if (nextLocation.pathname !== '/page3') {
      // 此处写入你需要执行的自定义代码
      console.log('用户从Page3跳转，执行指定逻辑');

      // 异步逻辑执行完成后调用reset放行跳转
      // 示例：await fetch('/save-data'); blocker.reset();
      blocker.reset();
    }
    // 非Page3离开场景直接不拦截
    return false;
  });

  return <div>Page3页面内容</div>;
};

方案2：React Router v5版本 #

使用useHistory的block方法实现拦截：

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

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

  useEffect(() => {
    // 注册跳转拦截器
    const unblock = history.block((targetLocation) => {
      if (targetLocation.pathname !== '/page3') {
        // 执行自定义逻辑
        console.log('用户从Page3跳转，执行指定逻辑');
        
        // 如需异步逻辑执行完成后再跳转，可先返回false，执行完成后手动调用跳转
        // 示例：saveData().then(() => { unblock(); history.push(targetLocation.pathname) });
        // return false;
      }
      // 返回true直接放行跳转
      return true;
    });

    // 组件卸载时取消拦截，避免影响其他页面
    return () => unblock();
  }, [history]);

  return <div>Page3页面内容</div>;
};

方案3：无路由依赖的轻量实现 #

如果你不需要阻止跳转、不需要判断跳转目标，仅需要在离开Page3时执行逻辑，直接用useEffect清理函数即可实现：

import { useEffect } from 'react';

const Page3 = () => {
  useEffect(() => {
    // 组件卸载（即离开Page3）时会执行返回的清理函数
    return () => {
      // 执行自定义代码
      console.log('离开Page3，执行指定逻辑');
    };
  }, []);

  return <div>Page3页面内容</div>;
};

注意：该方案无法拦截跳转，也无法在跳转前执行异步逻辑后再放行，仅适合纯同步逻辑、不需要控制跳转流程的场景

额外补充：监听刷新/关闭页面场景 #

如果需要覆盖用户刷新页面、关闭浏览器标签页的场景，需要额外绑定beforeunload事件：

useEffect(() => {
  const handleBeforeUnload = () => {
    // 执行离开前的逻辑
    console.log('用户刷新/关闭Page3页面');
  };
  window.addEventListener('beforeunload', handleBeforeUnload);
  return () => window.removeEventListener('beforeunload', handleBeforeUnload);
}, []);

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