带有framer-motion的Next.JS不会更改导航内容

Question

我的索引页面上有以下链接，它链接到我的About Us页面：

<Link href="/about"><a>About us</a></Link>

在我的_app.js文件中，我有这个AnimatePresence包装器：

<AnimatePresence exitBeforeEnter>
    <Component {...pageProps} key={router.route} />
</AnimatePresence>

现在，当我单击我的About Us链接时，浏览器的地址栏显示了新的路由，但是页面内容仍然是索引内容。

但是，当我删除AnimatePresence包装器时，它工作得很好(当然没有动画)。

为什么我的动画不起作用？

Answer 1

问题是我需要用一个动作包装器来包装我的组件，比如：

<motion.div
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                exit={{ opacity: 0 }}
            >