我正在尝试将我的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 一起使用。
任何帮助表示赞赏。
您需要提供给Routes
the key
and 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 中:
App.js
function App() {
return (
<BrowserRouter>
<AnimatedRoutes />
</BrowserRouter>
);
}
工作代码沙箱 https://codesandbox.io/s/react-router-v6-forked-vc8mr?file=/src/About.js.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)