v6版本升级后路由跳转回调异常排查记录

最近在将项目从React Router v5升级到v6的过程中，遇到了一个令人头疼的路由跳转回调异常问题。本文将详细记录这个问题的排查过程和解决方案。

问题现象

升级v6后，发现使用useNavigate进行路由跳转时，部分异步操作回调函数执行异常，特别是当跳转到新页面后立即调用navigate()方法时，会出现回调函数不执行或执行时机错误的情况。

复现步骤

// 问题代码示例
const MyComponent = () => {
  const navigate = useNavigate();
  
  const handleAsyncAction = async () => {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 在跳转前执行回调
    console.log('执行回调');
    
    // 路由跳转
    navigate('/target');
  };
  
  return (
    <button onClick={handleAsyncAction}>执行异步操作</button>
  );
};

排查过程

版本差异分析：v6中useNavigate的API行为与v5有显著不同，特别是对异步操作的处理。
组件卸载检查：通过在组件销毁时添加清理函数，发现当跳转过程中组件被提前卸载时，回调函数确实无法正常执行。
生命周期验证：使用useEffect和useRef追踪组件生命周期，确认了回调执行的时机问题。

解决方案

const MyComponent = () => {
  const navigate = useNavigate();
  const isMounted = useRef(true);
  
  useEffect(() => {
    return () => {
      isMounted.current = false;
    };
  }, []);
  
  const handleAsyncAction = async () => {
    // 模拟异步操作
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    if (!isMounted.current) return;
    
    console.log('执行回调');
    navigate('/target');
  };
  
  return (
    <button onClick={handleAsyncAction}>执行异步操作</button>
  );
};