在react使用swiper的时候,a标签失灵

Question

在react使用swiper的时候，使用a标签包裹图片但是只能点击到一个a标签，其他的好像被覆盖住一样，但是图片却切换正常。

<Swiper
          modules={[Autoplay, EffectFade, Navigation, Pagination]}
          // spaceBetween={30}
          effect={'fade'}
          loop={true}
          navigation={false}
          pagination={{
            clickable: true,
          }}
          autoplay={{
            disableOnInteraction: true,
          }}
          initialSlide={1}
          className="mySwiper"
        >
          {
            data?.map((item: any) => {
              return (
                <SwiperSlide key={item?.id}><Link to={`/detail/${item?.id}`}><img src={item?..url} /></Link></SwiperSlide>
              )
            })
          }
        </Swiper>

Answer 1

解决办法：

将Link组件的innerRef参数替换为ref，以将ref绑定到DOM元素，而不是使用innerRef绑定到Link组件。
给SwiperSlide和img元素添加key属性。
将SwiperSlide元素替换为div，并在其中包装Link组件和img元素。