有没有办法在路由器 dom 6.8（6.4 以上）中使用具有成帧器运动动画存在的退出动画？

Question

在 BrowserRouter 的早期版本中，我可以用 animatePresence 包装路由，并允许退出动画。

但是现在使用 createBrowserRouter 时会出现错误，因为 animatePresence 不是路由器组件。有什么办法可以做到吗？

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route index element={<Main />} />
      <Route path="about" element={<About />} />
      <Route path="projects" element={<Projects />} />
      <Route path="contact" element={<Contact />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={router} />;
}

我尝试在

<Outlet />

组件周围使用它，但它出现了问题。 我尝试在

<RouterProvider />

周围使用它，也遇到了错误。 我尝试仅在运动 div 上使用 animatePresence 和 useLocation，但也不起作用。

Answer 1

对于那些仍在寻求答案的人。我尝试用运动组件包裹 Outlet 组件，它成功了。 这是代码：

<AnimatePresence mode="wait">
<motion.div
  key={location.pathname}
  initial={{ opacity: 0, x: 100 }}
  animate={{ opacity: 1, x: 0 }}
  exit={{ opacity: 0, x: 100 }}
  transition={{ duration: 1, ease: "easeOut" }}
>
  <Outlet />
</motion.div>
</AnimatePresence>