v6路由跳转动画实现踩坑：过渡效果配置错误排查

在React Router v6升级过程中，路由跳转动画实现是一个常见但容易踩坑的环节。本文将详细记录在v6版本中实现过渡效果时遇到的问题及解决方案。

问题场景

在项目从v5升级到v6后，原有的路由切换动画失效。经过排查发现，v6中Switch组件被Routes替代，同时路由组件的渲染方式发生了变化。

核心问题

使用framer-motion实现过渡效果时出现以下错误：

// 错误写法
import { motion } from 'framer-motion'
import { Routes, Route } from 'react-router-dom'

function App() {
  return (
    <Routes>
      <Route path="/" element={<motion.div>Home</motion.div>} />
    </Routes>
  )
}

正确方案

v6中需要配合useLocation和AnimatePresence来实现正确的过渡动画：

import { motion, AnimatePresence } from 'framer-motion'
import { Routes, Route, useLocation } from 'react-router-dom'

function App() {
  const location = useLocation()
  
  return (
    <AnimatePresence>
      <Routes location={location} key={location.pathname}>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </AnimatePresence>
  )
}

function Home() {
  return (
    <motion.div 
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3 }}
    >
      Home Content
    </motion.div>
  )
}

关键点

1. 使用AnimatePresence包裹Routes
2. 通过useLocation获取当前路径
3. Routes组件需传入location和key属性
4. 路由组件内使用motion组件实现动画

注意事项

• v6的路由结构变化导致原有的动画实现方式需要重构
• 确保AnimatePresence的层级正确
• 动画性能优化建议添加shouldBlock等配置项

通过以上调整，成功在v6中实现了流畅的路由切换动画效果。