v6版本升级后路由跳转动画延迟记录

在React Router v6升级后，我们遇到了一个有趣的路由跳转动画延迟问题。这个问题表现为从页面A跳转到页面B时，动画执行出现明显延迟。

问题复现步骤：

1. 使用<Link to="/page-b">进行路由跳转
2. 页面B的组件有useEffect依赖项触发动画
3. 观察到跳转动画开始时间明显滞后

根本原因分析： 经过排查，发现是v6中useNavigate和useLocation的使用方式变化导致。在v6中，路由过渡的时机与之前的版本不同，需要手动处理动画的触发时机。

解决方案：

// 在页面B组件中
const location = useLocation();
const navigate = useNavigate();

useEffect(() => {
  // 确保在路由完成后执行动画
  const timer = setTimeout(() => {
    // 执行动画逻辑
    startAnimation();
  }, 0);
  
  return () => clearTimeout(timer);
}, [location.pathname]);

或者使用useTransition（v6.4+）：

const transition = useTransition();
useEffect(() => {
  if (transition.state === 'idle') {
    // 执行动画
  }
}

这种延迟问题在v6中较为常见，需要开发者对路由生命周期有更深入的理解。