コンポーネント内の動的リンクがサイトのほとんどの場所 (静的ページ) で機能するが、特定の 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 クラスの子である場合にのみ発生します。
ありがとう!!