gpt4 book ai didi

javascript - React-router-dom (v6) 和 Framer Motion (v4)

转载 作者:行者123 更新时间:2023-12-05 00:30:17 27 4
gpt4 key购买 nike

我正在尝试将我的 react-router-dom 更新到 v6,但它似乎会导致成帧器 Action 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;
然后在我的 About/Home 组件中,我有:
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 keylocation像这样的 Prop :
AnimatedRoutes.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>
);
}
Working CodeSandbox .

关于javascript - React-router-dom (v6) 和 Framer Motion (v4),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70239122/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com