v6版本升级后路由跳转动画性能记录

在React Router v6升级后，我们发现路由跳转动画出现性能问题。通过分析发现，v6中使用useNavigate替代了v5的history对象，导致动画实现方式需要重新设计。

问题复现步骤：

在App.js中使用v6的BrowserRouter包装应用
创建带有CSSTransition的路由组件
使用useNavigate进行页面跳转
观察动画卡顿现象

解决方案：

import { useNavigate } from 'react-router-dom';
import { CSSTransition } from 'react-transition-group';

const App = () => {
  const navigate = useNavigate();
  const [transitionState, setTransitionState] = useState('enter');
  
  const handleNavigate = (path) => {
    setTransitionState('exit');
    setTimeout(() => {
      navigate(path);
      setTransitionState('enter');
    }, 300);
  };

  return (
    <CSSTransition
      in={transitionState === 'enter'}
      timeout={300}
      classNames="fade"
      unmountOnExit
    >
      <div>
        {/* 页面内容 */}
      </div>
    </CSSTransition>
  );
};

通过在v6中重新整合动画逻辑，我们成功解决了性能问题，同时保持了路由跳转的流畅体验。