reactjs - 您正在尝试在 AnimatePresence 中为多个子级设置动画，但其 exitBeforeEnter 属性设置为 true

Question

浏览器控制台错误

You're attempting to animate multiple children within AnimatePresence,
but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.

App.js（包含在 BrowserRouter 中）

<Switch>
       <AnimatePresence exitBeforeEnter>
          <Route key="1"  exact path="/" component={Home}/>
          <Route key="2"  exact path="/home" component={Home}/>
          <Route key="3"  exact path="/articles" component={Articles}/>
       </AnimatePresence>
 </Switch>

Home.js/Articles.js

const Home = props =>{
  return(
    <motion.h1 initial={{x:-100}} animate={{x:0}} exit={{x:-100}}>Home/Articles</motion.h1>
  )
}

export default Articles

谁能解释导致错误的原因？

Answer 1

正如文档所说exitBeforeEnter：

如果设置为 true，AnimatePresence 一次只会渲染一个组件。退出组件将在渲染进入组件之前完成其退出动画。

因此，启用此道具后，您希望以另一种方式Switch使用AnimatePresence

<AnimatePresence exitBeforeEnter>
  <Switch location={location} key={location.pathname}>
    <Route exact path="/" component={Home}/>
    <Route exact path="/home" component={Home}/>
    <Route exact path="/articles" component={Articles}/>
  </Switch>
</AnimatePresence>

请注意，您还需要key通过Switch