javascript - React Router 和 framer motion Animate Presence

Question

当我将“exitBeforeEnter” Prop 添加到带有嵌套路由的 Animate Presence 组件时，路由根本没有呈现，但是当我刷新它们呈现的页面时，删除此 Prop 或直接转到组件将修复它，但是我需要使用 react-router 的 prop 和重定向组件

这是我的代码:

<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>

Answer 1

来自 exitBeforeEnter文档

If set to true, AnimatePresence will only render one component at a time. The exiting component will finished its exit animation before the entering component is rendered.

您必须为您在 AnimatePresence 中使用的所有组件指定 exit 动画。在路由更改时，AnimatePresence 将首先执行 exit 动画，然后才渲染下一个组件。如果组件没有 exit 动画并且它是 AnimatePresence 的子组件，那么路由更改只会更改 url 而不会更改 View 。