下一个/链接 URL 更改但页面不会重新呈现答案

【问题标题】：next/link URL changing but page doesn't re-render下一个/链接 URL 更改但页面不会重新呈现
【发布时间】：2021-12-30 13:14:16
【问题描述】：

我有一个奇怪的问题，组件内的动态链接在站点上的 大多数 位置（静态页面）中有效，但在特定的 React 组件中无效 - Algolia InstantSearch（功能与此非常相似组件：https://github.com/algolia/react-instantsearch/blob/master/examples/next/components/app.js)。

我尝试过使用“常规”链接组件，即：

<Link href={'/products/[permalink]'}
      as = {`/products/${permalink}`}
      passHref> 
....
</Link>

另外尝试使用此处概述的 useRouter 钩子：https://mariestarck.com/a-beginners-guide-to-dynamic-routing-in-next-js/


const router = useRouter();
const ROUTE_PRODUCT_PERMALINK = "/products/[permalink]";

const navigate = (permalink) =>
router.push({
  pathname: ROUTE_PRODUCT_PERMALINK,
  query: { permalink }
});

return (

  <a className="group relative" onClick={() => navigate(permalink)}>

点击后，URL 会正确更改并且 getInitialProps 似乎正在运行，但当前页面并未卸载。这只发生在组件是 InstantSearch React 类的子组件时。

谢谢！！

【问题讨论】：

道歉 - 似乎无法编辑我的原始问题以包含代码，但这是包含主要应用程序组件的页面（可能导致路由器问题）：codesandbox.io/s/exciting-violet-j3pcb?file=/pages/index.js
请提供minimal reproducible example。
@juliomalves 这个问题实际上是在创建一个示例时实现的——它似乎在没有 framer-motion 的情况下工作，它帮助我在自己的代码中找到了根本原因，所以谢谢！
请修剪您的代码，以便更容易找到您的问题。请按照以下指南创建minimal reproducible example。

标签： javascript reactjs next.js next-router react-instantsearch

【解决方案1】：

这实际上是我的主题的一个问题 - 某些挂钩依赖于动画来卸载（作为 framer-motion 库的一部分），它没有传递给 InstantSearch App 组件。将我的搜索结果页面包含在 <motion.div> 中似乎可以解决问题 - 问题不在于路由本身。

【讨论】：