我正在嘗試將我的 react-router-dom 更新到 v6，但它似乎導致了成幀器運動 AnimatePresence 的問題，特別是退出轉換。
在 App.js 中：
import { Routes, Route } from "react-router-dom";
import {AnimatePresence} from "framer-motion";
import Home from "./Components/Home";
import About from "./Components/About";
function App() {
return (
<div className="App">
{/* globals such as header will go here */}
<AnimatePresence exitBeforeEnter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</AnimatePresence>
</div>
);
}
export default App;
然后在我的關于/主頁組件中，我有：
import {Link} from "react-router-dom";
import {motion} from "framer-motion";
function About() {
const pageMotion = {
initial: {opacity: 0, x: 0},
animate: {opacity: 1, x: 50, transition: {duration: 2}},
exit: {opacity: 0, x:0, transition: {duration: 2}}
};
return (
<div className="about">
<motion.div initial="initial" animate="animate" exit="exit" variants={pageMotion}>about page</motion.div>
<Link to="/">Go to home page</Link>
</div>
)
}
export default About
“初始”和“影片”作業正常，但退出被忽略，并立即跳轉到相關頁面（而不是先影片出來）。
注意：我也不得不降級到 framer-motion v4，因為 v5 不適用于 Create-react-app。
任何幫助表示贊賞。
uj5u.com熱心網友回復：
您需要提供Routes的key和location道具是這樣的：
影片路由.js
const AnimatedRoutes = () => {
const location = useLocation();
return (
<AnimatePresence exitBeforeEnter>
<Routes location={location} key={location.pathname}>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</AnimatePresence>
);
};
并且由于呼叫 useLocation 的組件必須包裝在 BrowserRouter 中：
應用程式.js
function App() {
return (
<BrowserRouter>
<AnimatedRoutes />
</BrowserRouter>
);
}
作業代碼沙盒。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/373313.html
標籤：javascript 反应 创建反应应用程序 反应路由器-dom 成帧运动