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

【问题标题】：Next.JS with framer-motion does not change content on navigation带有 framer-motion 的 Next.JS 不会更改导航内容
【发布时间】：2020-02-11 19:10:35
【问题描述】：

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript reactjs next.js framer-motion

【解决方案1】：

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

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

【讨论】：