javascript - 具有成帧器运动的Next.JS不会更改导航内容

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

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

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

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

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

但是，当我移除AnimatePresence包装器时，它工作正常（当然没有动画）。

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

最佳答案

嗯，问题是我需要用运动包装器包装组件，例如：

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