exitBeforeEnter 未按预期工作 - 页面转换出现问题

Question

我正在尝试使用react-router-dom和framer-motion的组合来创建平滑的页面过渡，并且我正在尝试让页面在退出时淡出并在输入时淡入。但是 exitBeforeEnter 没有按预期工作。退出时该页面不会淡出，但每次都会淡入下一页。下面是我的代码，我将附加其中一个页面文件（所有页面都有几乎相同的代码）。

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

应用程序.js

import React from 'react';
import About from "./pages/About.js"
import Home from "./pages/Home.js"
import Projects from "./pages/Projects.js"
import { AnimatePresence } from 'framer-motion'
import { BrowserRouter as Switch, Route, useLocation } from "react-router-dom";

function App() {

  const location = useLocation();

  return (
    <div className="App">
      <AnimatePresence exitBeforeEnter>
        <Switch location={location} key={location.pathname}>
          <Route path="/about" component={About} />
          <Route path="/projects" component={Projects} />
          <Route path="/" exact component={Home} />
        </Switch>
      </AnimatePresence>
    </div>
  );
}

export default App;

Home.js（页面文件）

import React from 'react';
import '../css/main.css';
import '../css/index.css';
import particleText from '../components/ParticleText.js'
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion'

const pageVariants = {
  in: { 
    opacity: 1,
    transition: {
      duration: 1
    } 
  },
  out: { 
    opacity: 0,
    transition: {
      duration: 1
    } 
  }
}

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    try { particleText(true) } catch { /* Error */ }
    return (
      <motion.div className="main" initial="out" animate="in" exit="out" variants={pageVariants}>
        <div className="introOverlay"></div>
        <Link to="/about" className="homeButtonContainer">
            <p className="homeButtonText">About Me</p>
        </Link>
        <Link to="/projects" className="homeButtonContainer">
            <p className="homeButtonText">My Projects</p>
        </Link>
      </motion.div>
    );
  }
}

export default Home;

Answer 1

该属性exitBeforeEnter现已弃用，必须替换为mode='wait'：

<AnimatePresence mode='wait'>
    ...
<AnimatePresence>

这样，组件之间的更改将是无缝的，因为第一个组件将在加载下一个组件及其各自的动画之前卸载。