#javascript #reactjs #create-react-app #react-router-dom #framer-motion
#javascript #reactjs #create-react-app #react-router-dom #фреймер-движение
Вопрос:
Я пытаюсь обновить свой react-router-dom до версии 6, но, похоже, это вызывает проблемы с анимацией framer movements, в частности с переходом exit.
В 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.
Любая помощь приветствуется.
Ответ №1:
Вам необходимо предоставить в Routes
key
and location
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:
App.js
function App() {
return (
<BrowserRouter>
<AnimatedRoutes />
</BrowserRouter>
);
}
Комментарии:
1. Зачем
location
нужна поддержка? Разве ключа не должно быть достаточно?2. Это работает с этой конфигурацией. Если вы добавите маршрут с параметром, он не будет работать. Например:
<Route path="/hazards/:id" element={<HazardDetails />} />
. Если вы перейдете к нему и передадите ему astate
, состояние будет нулевым при размонтировании и выдаст ошибку.