Javascript 帧运动动画呈现不'；更改路由时不执行

我在Framer运动库中遇到问题，尤其是AnimatePresence转换。我可以让它在正常情况下工作，但当我在自定义实现中包装我的路线时，我无法让退出动画工作

当我导航到不同的路径时，我确认在组件处使用useEffect钩子正在卸载，但退出动画不会由父动画呈现触发

任何帮助都将不胜感激

这是我的密码：

App.ts

const App = () => {

    const auth: AuthContextState = useContext(AuthContext);
    const db: FirestoreContextProps = useContext(FirestoreContext);

    const components = {
        home: HomeScreen,
        classes: ClassScreen,
        users: UserScreen,
        login: LoginScreen
    }



    return (
        <Background>
            <Navbar/>
            <Dashboard isLoggedIn={auth.data.authenticated}>
                <AnimatedRoutes>
                    <RouteTransition path={`/home`} key={0}>
                        <HomeScreen key={0} />
                    </RouteTransition>
                    <RouteTransition path={`/classes`} key={1}>
                        <ClassScreen key={1} />
                    </RouteTransition>
                    <RouteTransition path={`/users`} key={2}>
                        <UserScreen key={2} />
                    </RouteTransition>
                    <RouteTransition path={'/login'} key={3}>
                        <LoginScreen key={3} />
                    </RouteTransition>
                    <RouteTransition exact path={'/'} key={4}>
                        <Redirect to={'/home'}/>
                    </RouteTransition>
                </AnimatedRoutes>
            </Dashboard>
        </Background>
    );
}

const-App=（）=>{
const auth:AuthContextState=useContext（AuthContext）；
const db:FirestoreContextProps=useContext（FirestoreContext）；
常数分量={
主页：主屏幕，
类别：ClassScreen，
用户：UserScreen，
登录：LoginScreen
}
返回(
);
}

动画路线：

type Props = {
    exitBeforeEnter?: boolean
    initial?: boolean
}

export const AnimatedRoutes: FC<Props> = ({
    children,
    exitBeforeEnter = true,
    initial = false,
}) => {

    return (
        <AnimatePresence exitBeforeEnter={exitBeforeEnter} initial={initial}>
            <Switch>
                {children}
            </Switch>
        </AnimatePresence>
    )

}

type RouteProps = {
    key: number
    exact?: boolean
    path: string
    slide?: number
    slideUp?: number
}

export const RouteTransition: FC<RouteProps> = ({

    children,
    key,
    exact = false,
    path,
    slide= 0,
    slideUp = 0,
    ...rest

}) => {

    return (
        <Route path={path} exact={exact} {...rest}>
            <MountTransition key={key} >
                {children}
            </MountTransition>
        </Route>
    )
}

类型道具={
exitBeforeEnter？：布尔值
初始值？：布尔值
}
导出常量AnimatedRoutes:FC=({
儿童
exitBeforeEnter=true，
初始值=假，
}) => {
返回(
{儿童}
)
}
类型RouteProps={
钥匙：号码
精确？：布尔值
路径：字符串
幻灯片？：编号
幻灯片？：编号
}
导出常量路由转换：FC=({
儿童
钥匙
精确=错误，
路径
滑动=0，
slideUp=0，
休息
}) => {
返回(
{儿童}
)
}

安装转换：

type Props = {
    key: number
    slide?: number
    slideUp?: number
}


const Container = styled(motion.div)`
    display: flex;
    height: 100%;
    width: 100%;
`

export const MountTransition: FC<Props> = ({
    children,
    key,
    slide = 0,
    slideUp = 0,
}) => {
    return (
        <Container
            key={key}
            initial={{opacity: 0, x: slide, y: slideUp}}
            animate={{opacity: 1, x: 0, y: 0}}
            exit={{opacity: 0, x: slide, y: slideUp}}
            transition={{type: 'tween', duration: 2, ease: 'easeInOut'}}
        >
            {children}
        </Container>
    )
}

类型道具={
钥匙：号码
幻灯片？：编号
幻灯片？：编号
}
const Container=styled（motion.div）`
显示器：flex；
身高：100%；
宽度：100%；
`
导出常量装入转换：FC=({
儿童
钥匙
滑动=0，
slideUp=0，
}) => {
返回(
{儿童}
)
}

尝试以下方法：

<Route
   render={({location}) => {
     return (
       <AnimatePresence exitBeforeEnter>
          <Switch location={location} key={location.key}>
             <Route .../>
             <Route .../>
             <Route .../>
           </Switch>
       </AnimatePresence>
     )
   }}
 />

{
返回(
)
}}
/>

尝试以下方法：

<Route
   render={({location}) => {
     return (
       <AnimatePresence exitBeforeEnter>
          <Switch location={location} key={location.key}>
             <Route .../>
             <Route .../>
             <Route .../>
           </Switch>
       </AnimatePresence>
     )
   }}
 />

{
返回(
)
}}
/>