Javascript 反应路由器和帧运动为存在设置动画

当我将“exitBeforeEnter”道具添加到带有嵌套路由的动画呈现组件时，这些路由根本没有呈现，但当我刷新它们呈现的页面时，删除此道具或直接转到组件将修复它，但我需要使用react router中的道具和重定向组件

这是我的代码：

<AnimatePresence exitBeforeEnter>
                <Switch location={this.props.location} key={this.props.location.pathname} >
                    <Route exact path='/home' component={() => <.../>

                    <Route path='/home/:alpha3Code' component={({match}) =>
                        .... />

                    <Redirect to='/home' />
                </Switch>
</AnimatePresence>

.... />

来自文档

如果设置为

true

，

AnimatePresence

一次只渲染一个组件。在渲染输入组件之前，退出组件将完成其退出动画

---

您必须为在

AnimatePresence

中使用的所有组件指定

exit

动画。在路线更改时，

AnimatePresence

将首先执行

exit

动画，然后仅渲染下一个组件。如果组件没有

exit

动画，并且它是

AnimatePresence

的子组件，则路由更改只会更改url，而不会更改视图。

如果不向每个路由添加

exit

动画，这是正常的

带动画呈现的主要路线

<AnimatePresence exitBeforeEnter>
  <Switch location={window.location} key={window.location.pathname}>
    <Route exact path='/' component={Home} />
    <Route exact path='/about' component={About} />
    <Route path="*">Page not found</Route>
  </Switch>
</AnimatePresence

找不到页面
对于那些仍然迷路的人，您需要使用其他答案中提到的“exit”参数将标记环绕在标记周围。下面提供了示例代码


return (
            <motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show' className='login-container'>
                <Redirect to='/Dashboard' />
            </motion.div>
        );



返回(
);

const exit = {
  exit: {
   opacity: 0,
  },
}
export default function Home() {
  return <motion.h1 {...exit}>Hello</h1>
}


return (
            <motion.div exit='exit' variants={PageTransition} initial='hidden' animate='show' className='login-container'>
                <Redirect to='/Dashboard' />
            </motion.div>
        );