1

我有一个奇怪的问题，组件内的动态链接在网站上的大多数地方（静态页面）都有效，但在特定的 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 ://mariesstarck.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 类的子组件时。

谢谢！！

4

1 回答 1

2

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

于 2022-01-05T21:24:57.297 回答