next/link URL 正在更改但页面未重新呈现

Question

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

我试过使用 'usual' Link 组件，即：

<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 Class.

的子组件时发生

谢谢！！

Answer 1

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

next/link URL 正在更改但页面未重新呈现

next/link URL changing but page doesn't re-render

javascript

reactjs

next.js

next-router

react-instantsearch