swiper-thumbs-gallery-loop-react 在反应 js 中不起作用答案

【问题标题】：swiper-thumbs-gallery-loop-react not working in react jsswiper-thumbs-gallery-loop-react 在反应 js 中不起作用
【发布时间】：2022-08-23 15:17:58
【问题描述】：

我遇到了一个问题，我想创建一个滑动拇指画廊滑块。问题是，当我从 swiper js 复制代码并将其粘贴到我的 react 应用程序中时，它无法正常工作并出现名为“组件中发生上述错误”的错误：而相同的代码在代码沙箱中工作。请帮我创建画廊拇指滑块。

import React, { useRef, useState } from \"react\";
// Import Swiper React components
import { Swiper, SwiperSlide } from \"swiper/react\";

// Import Swiper styles
import \"swiper/css\";
import \"swiper/css/free-mode\";
import \"swiper/css/navigation\";
import \"swiper/css/thumbs\";



// import required modules
import { FreeMode, Navigation, Thumbs } from \"swiper\";

 function App () {
  const [thumbsSwiper, setThumbsSwiper] = useState(null);

  return (
    <>
      <Swiper
      
        loop={true}
        spaceBetween={10}
        navigation={true}
        thumbs={{ swiper: thumbsSwiper }}
        modules={[FreeMode, Navigation, Thumbs]}
        className=\"mySwiper2\"
      >
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-1.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-2.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-3.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-4.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-5.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-6.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-7.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-8.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-9.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-10.jpg\" />
        </SwiperSlide>
      </Swiper>
      <Swiper
        onSwiper={setThumbsSwiper}
        loop={true}
        spaceBetween={10}
        slidesPerView={4}
        freeMode={true}
        watchSlidesProgress={true}
        modules={[FreeMode, Navigation, Thumbs]}
        className=\"mySwiper\"
      >
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-1.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-2.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-3.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-4.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-5.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-6.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-7.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-8.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-9.jpg\" />
        </SwiperSlide>
        <SwiperSlide>
          <img src=\"https://swiperjs.com/demos/images/nature-10.jpg\" />
        </SwiperSlide>
      </Swiper>
    </>
  );
}

export default App;

标签： slider swiper.js react-swiper

【解决方案1】：

用这个

  <BrowserRouter>
  <App />
</BrowserRouter>

代替

  <React.StrictMode>
<BrowserRouter>
  <App />
</BrowserRouter>

</React.StrictMode>

【讨论】：