Question

在早些时候与BrowserRouter的版本中,我可以把路线与亲密的主人混为一谈,并允许进行撤离。

但现在却在创造。 BrowserRouter公司因囚犯而造成错误驻留不是一个路由部分。是否有办法这样做?

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} />;
}

I tried to use it around the <Outlet /> components and it bugged. I tried to use it around the <RouterProvider /> and also got an error. I tried to only use animatePresence and useLocation on the motion div and did not work either.

Answer 1

For those who are still seeking for answer. I tried to wrap the Outlet component with motion component, and it worked. Here is the code:

<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>

友情链接