如何在 NextJs 中强制 <link> 仅使用单击

Question

我使用 Flickity-React-Component 作为可交换的轮播，并将 NextJs 传递给它的子组件。

问题是当单击并交换轮播时，释放鼠标后单击它会打开该链接
有没有办法强制它使用单击？

这是我的代码：

 <Flickity
                options={{
                    freeScroll: true,
                    contain: true,
                    wrapAround : true,
                    prevNextButtons: false,
                    pageDots: false,
                    initialIndex: 2,
                }}>

                {slides?.length && slides.map((item, idx) => {
                    return (
                        // <Link key={`banner_${item.id}`} href={`/${item.shop_link}`}>
                        <div>
                            <Image src={item.src} />
                        </div>
                        // </Link>
                    )
                })}
            </Flickity>

抱歉我的英语不好

我已经更改了 onCLick 事件，但它不起作用

Answer 1

我认为在 Flickity 轮播中使用 Next.js 组件时的单击行为，您可以使用

preventDefault

方法来停止默认链接行为并以编程方式处理导航

import { useRouter } from 'next/router';

const Carousel = ({ slides }) => {
  const router = useRouter();

  const handleClick = (item) => {
    router.push(`/${item.shop_link}`);
  };

  return (
    <Flickity
      options={{
        freeScroll: true,
        contain: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        initialIndex: 2,
      }}
    >
      {slides?.length && slides.map((item, idx) => (
        <div key={`banner_${item.id}`} onClick={() => handleClick(item)}>
          <Image src={item.src} />
        </div>
      ))}
    </Flickity>
  );
};

export default Carousel;

useRouter

来自

next/router

用于通过

router.push

触发导航