如何将Swiper滑块嵌入react-router-dom的Link组件？点击无响应求助

你的问题核心是React Swiper在渲染时会重构SwiperSlide的DOM结构，导致外层包裹的Link组件被忽略，所以才会出现Link不可见、点击不跳转的情况。下面是几种可行的解决办法：

方法1：将Link组件移到SwiperSlide内部 #

把Link从SwiperSlide的外层移到内部，包裹卡片的所有内容，这样Swiper不会干扰Link的渲染：

<SwiperSlide className="swiper-slider-card" key={item.id}>
  <Link to="/movie/">
    <LoadImage
      path={"https://image.tmdb.org/t/p/w500" + item.poster_path}
      altImage="backgroundSliderImage"
      classNames="absolute top-0 left-0 w-full h-full object-contain"
    />
    <div className="absolute bottom-2 left-3">
      <p className="text-white text-2xl bg-slate-600 inline-block p-2 rounded-lg  text-bold font-quicksand">
        {MovieDate}
      </p>
      <p className="text-2xl text-white mt-2 bg-slate-700 p-2 rounded-lg drop-shadow-md">
        {item.title}
      </p>
    </div>
  </Link>
</SwiperSlide>

如果需要让整个SwiperSlide区域都可点击，给Link添加block w-full h-full类，确保它占满整个Slide的空间：

<Link to="/movie/" className="block w-full h-full">
  {/* 图片和文本内容 */}
</Link>

方法2：通过Swiper的点击事件手动触发路由跳转 #

如果不想依赖Link组件，可以利用Swiper的onSlideClick事件，结合React Router的useNavigate钩子实现跳转：

首先在组件中引入useNavigate：

import { useNavigate } from 'react-router-dom';

然后初始化navigate实例，并给Swiper添加点击事件：

const navigate = useNavigate();

// ...

<Swiper
  // 你的其他Swiper配置
  onSlideClick={(swiper) => {
    // 获取当前点击的slide对应的数据
    const clickedItem = yourItemsArray[swiper.clickedIndex];
    navigate(`/movie/`); // 可根据item拼接动态路由，比如`/movie/${clickedItem.id}`
  }}
>
  {yourItemsArray.map(item => (
    <SwiperSlide className="swiper-slider-card" key={item.id}>
      {/* 图片和文本内容，无需包裹Link */}
    </SwiperSlide>
  ))}
</Swiper>

方法3：检查Swiper配置是否阻止事件冒泡 #

部分Swiper配置会阻止点击事件传递到外层组件，检查你的Swiper是否设置了以下属性，若有可尝试移除或调整：

• preventClicks: true：该配置会阻止slide上的点击事件，需改为false
• preventClicksPropagation: true：会阻止事件冒泡，不需要的话可以关闭

调整后的Swiper配置示例：

<Swiper
  preventClicks={false}
  preventClicksPropagation={false}
  // 其他配置
>
  {/* ... */}
</Swiper>

内容的提问来源于stack exchange，提问作者nika bedenashvili