React-router-dom v6搭配Framer Motion v4时AnimatePresence退出过渡失效问题

根因说明 #

React Router v6 的 <Routes> 组件默认不会向 AnimatePresence 暴露路由变化的身份标识。AnimatePresence 必须检测到直接子元素的 key 属性发生变化，才会触发旧组件的退场动画逻辑。你的现有写法中 AnimatePresence 的子元素 <Routes> 没有随路由变化的唯一 key，因此切换路由时旧页面直接被销毁，不会触发 exit 动画。

修复步骤 #

1. 修改App.js代码 #

导入 useLocation 钩子获取当前路由位置，给 <Routes> 组件添加随路由变化的 key 和 location 属性：

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

import Home from "./Components/Home";
import About from "./Components/About";

function App() {
  const location = useLocation();
  return (
    <div className="App">
      {/* 全局公共组件如头部可以放在这里 */}
      <AnimatePresence exitBeforeEnter>
        <Routes location={location} key={location.pathname}>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
        </Routes>
      </AnimatePresence>
    </div>
  );
}

export default App;

2. 补充检查项 #

• 确认 Home 组件也配置了和 About 组件一致的 initial/animate/exit 动画属性，否则 Home 切换时不会触发退场动画。
• 如果你的路由存在动态参数（如 /user/:id），可以将 <Routes> 的 key 替换为 location.key，每次路由跳转都会生成唯一值，避免同路由不同参数切换时动画不触发。

可选优化 #

你可以直接将动画配置写到 motion 标签上，减少重复代码，原有 variants 写法也可正常运行：

import { Link } from "react-router-dom";
import { motion } from "framer-motion";  

function About() {
  return (
    <div className="about">
      <motion.div 
        initial={{opacity: 0, x: 0}}
        animate={{opacity: 1, x: 50, transition: {duration: 2}}}
        exit={{opacity: 0, x:0, transition: {duration: 2}}}
      >
        about page
      </motion.div>
      <Link to="/">返回首页</Link>
    </div>
  )
}

export default About

内容的提问来源于stack exchange，提问作者Benji40