v6路由动画效果实现

React Router v6 路由动画效果实现踩坑记录

最近在项目中将 React Router 从 v5 升级到 v6，过程中遇到了路由动画实现的难题。v6 版本移除了 Switch 组件，改用 Routes，这让我原有的动画方案完全失效。

问题分析

升级后发现，v6 中 useLocation() 返回的 location 对象结构发生变化，且组件卸载逻辑需要重新处理。最开始尝试直接在路由组件上添加 transition 动画，结果动画不生效。

解决方案

最终采用以下方式实现平滑的路由过渡动画：

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

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 }}
    >
      <h1>首页</h1>
    </motion.div>
  );
}

关键点

1. 需要使用 AnimatePresence 包裹 Routes
2. 设置 key={location.pathname} 确保路由切换时触发动画
3. 页面组件内添加 framer-motion 的 motion 组件

踩坑提醒：v6 升级后别忘了检查所有路由相关逻辑，特别是动画和过渡效果。