v6路由跳转动画配置错误排查分享

AliveMind +0/-0 0 0 正常 2025-12-24T07:01:19 React-Router

在React Router v6升级过程中，我们遇到了路由跳转动画配置错误的问题。问题表现为页面切换时动画不生效，控制台报错提示'Cannot read property 'location' of undefined'。

问题排查过程：

首先确认v6版本的路由配置已正确迁移至新的语法结构
检查动画库（如framer-motion）的使用方式是否符合v6规范
发现问题出现在useLocation()钩子的使用上，由于v6中路由上下文变化导致

解决方案：

import { useLocation, useNavigate } from 'react-router-dom';
import { motion } from 'framer-motion';

function AnimatedRoute() {
  const location = useLocation();
  const navigate = useNavigate();
  
  // 确保在正确的上下文中使用动画组件
  return (
    <motion.div
      key={location.pathname}
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Outlet />
    </motion.div>
  );
}

关键点： v6中需要确保motion组件包裹在正确的路由层级，并且使用key={location.pathname}来触发动画重渲染。升级时建议先在测试环境验证，避免影响线上用户体验。