Framer 运动退出动画不适用于 HashRouter答案

【问题标题】：Framer motion exit animation doesn't work with HashRouterFramer 运动退出动画不适用于 HashRouter
【发布时间】：2021-03-28 15:42:09
【问题描述】：

这个确切的问题被问到here

但似乎没有人回答。所以我也会告诉我我的问题；

我正在使用 BrowserRouter 处理路由，但刷新时它不起作用，所以我采用了一个简单的解决方案并使用 HashRouter 切换它。

并且 framer-motion 退出动画刚刚被禁用，出现动画和其他仍然可以正常工作。只有退出动画停止。

import ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

说实话，没有太多代码可以添加更多信息，因为问题就是这样。但我仍然在添加 App.js；

import Header from "./Components/Header";
import "./Sass/main.scss";
import { motion } from "framer-motion";
import { BrowserRouter, Route, Switch, useLocation } from "react-router-dom";
import About from "./Components/About";
import Trainings from "./Components/Trainings";
import { AnimatePresence } from "framer-motion";
const appVariants = {
  hidden: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
    transition: {
      duration: 1,
    },
  },
};
const App: React.FC = () => {
  const location = useLocation();

  return (
    <motion.div
      variants={appVariants}
      initial="hidden"
      animate="visible"
      className="App"
    >
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.key}>
          <Route path="/" exact={true}>
            <Header />
          </Route>
          <Route path="/hakkimda" exact={true}>
            <About />
          </Route>
          <Route path="/egitimler" exact={true}>
            <Trainings />
          </Route>
        </Switch>
      </AnimatePresence>
    </motion.div>
  );
};

export default App;

【问题讨论】：

标签： javascript reactjs react-router framer-motion

【解决方案1】：

HashRouter 没有位置。这是react-router dom的文档中写的

重要提示：哈希历史不支持 location.key 或位置.状态。在以前的版本中，我们试图对这种行为进行填充但是有一些我们无法解决的极端情况。任何代码或插件需要这种行为是行不通的。由于该技术仅用于支持旧版浏览器，我们鼓励您将服务器配置为改为使用。

https://reactrouter.com/web/api/HashRouter

【讨论】：