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://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 クラスの子である場合にのみ発生します。

ありがとう!!

4

1 に答える 1