您正试图在AnimatePresence中为多个子对象设置动画,但其exitForgeEnter道具设置为true

浏览器控制台出错

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>

主页.js/文章.js

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

export default Articles

有人能解释一下导致错误的原因吗?