React Router v6路由切换动画实现方法

最近在项目中将React Router从v5升级到v6，遇到了不少兼容性问题，其中最头疼的就是路由切换动画的实现。v6版本对路由组件的渲染方式做了重大调整，导致之前在v5中使用的动画方案完全失效。

问题分析

在v5中，我们通常使用<TransitionGroup>和<CSSTransition>来实现路由动画，但v6采用了新的useNavigate和useLocation hooks，并且路由组件的渲染机制发生了变化。直接使用之前的动画方案会报错，提示找不到相关组件。

解决方案

经过多次踩坑，最终采用以下方案实现平滑的路由切换动画：

// 1. 创建自定义动画组件
import { useEffect, useRef } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';

function AnimatedRoutes() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 监听路由变化
  useEffect(() => {
    // 可以在这里添加路由切换的额外逻辑
  }, [location]);
  
  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={location.pathname}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
        transition={{ duration: 0.3 }}
      >
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </motion.div>
    </AnimatePresence>
  );
}

实际应用

在项目中，我们还遇到了一个关键问题：如何在组件卸载时执行动画。通过useEffect和useNavigate的配合使用，可以实现更精确的动画控制。

注意事项

1. 确保安装了framer-motion依赖
2. 保持路由组件结构的一致性
3. 考虑不同设备的性能表现

这个方案虽然需要额外引入第三方库，但效果稳定可靠，推荐在v6项目中使用。