Reactjs React路由器&x2B；动画库问题：组件赢了'；t在使用react router dom卸载之前设置动画

我有以下代码：

import React from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import { AnimatePresence, motion } from "framer-motion";
import Hi from "./Hi";
import Something from "./Something";
import "./App.css";

const App = () => {
  return (
    <BrowserRouter>
      <AnimatePresence>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
        <Route path="/" exact={true} key="1">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 2 }}
            key="hi"
          >
            <Hi />
          </motion.div>
        </Route>
        <Route path="/something" exact={true} key="2">
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            key="something"
            transition={{ duration: 2 }}
          >
            <Something />
          </motion.div>
        </Route>
      </AnimatePresence>
    </BrowserRouter>
  );
};

export default App;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，NavLink}；
从“帧运动”导入{AnimatePresence，motion}；
从“/Hi”导入Hi；
从“/某物”导入某物；
导入“/App.css”；
常量应用=（）=>{
返回(
你好


某物

);
};
导出默认应用程序；

---

它应该在安装

和

时进行淡入动画，在卸载时进行淡出。安装动画会出现，但另一个不会。这两个组件在动画效果开始之前都已卸载，并且所有动画库都会出现此问题：

帧运动

，

反应过渡组

，和其他。

不确定您是否仍在寻找答案，但我通过将

exitBeforeEnter

标志添加到

AnimatePresence

解决了类似的问题

所以

/。。。
你好


某物

//...

//...
<AnimatePresence exitBeforeEnter>
        <NavLink to="/">Hi</NavLink>
        <br />
        <NavLink to="/something">Something</NavLink>
        <hr />
//...