如何在React Router Dom的RouterProvider中配置Framer Motion？退出动画异常求助

你的问题核心在于AnimatePresence的放置位置错误，导致路由切换时首页组件和AnimatePresence一起被卸载，无法触发exit动画。以下是修复步骤：

1. 重构路由结构，统一包裹AnimatePresence #

将AnimatePresence提升到父路由的element中，用<Outlet />渲染所有子页面，确保所有页面组件都在同一个AnimatePresence容器内：

import { createBrowserRouter, RouterProvider, Outlet } from 'react-router-dom';
import { AnimatePresence } from 'framer-motion';
import Home from './Home';
import About from './About'; // 其他页面组件

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <AnimatePresence mode='wait'>
        <Outlet />
      </AnimatePresence>
    ),
    children: [
      { path: '/', element: <Home /> },
      { path: '/about', element: <About /> },
      // 添加其他页面路由
    ]
  }
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
);

2. 确保页面组件的motion元素配置正确 #

在Home组件中，通过useLocation获取路由路径作为key，同时检查exit动画变体是否正确定义：

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

// 定义过渡动画变体，必须包含exit状态
const pageTransition = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -20 }
};

function Home() {
  const location = useLocation();

  return (
    <motion.main
      key={location.pathname}
      variants={pageTransition}
      initial="initial"
      animate="animate"
      exit="exit"
      className="home"
      transition={{ duration: 0.5 }} // 明确过渡时长，避免动画不明显
    >
      {/* 页面内容 */}
    </motion.main>
  );
}

export default Home;

关键原理说明 #

之前的写法中，每个路由单独包裹AnimatePresence，跳转时首页的AnimatePresence会随Home组件一起被销毁，Framer Motion没有时间执行exit动画。将AnimatePresence统一放在父路由后，所有子页面组件都在同一个容器内，路由切换时旧组件的exit动画会被完整执行后再卸载，新组件才会挂载。

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