react router reload page after loop image

[ubay1]

i enabled loop: true..

but the on the react router when the first image is in the loop then I click the image to move the page but the page reloads, the SPA doesn't work. but if i click the first image without image loop, SPA works

const params = {
    slidesPerView: 4,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination2',
      clickable: true,
      show: false
    },
    breakpoints: {
      800: {
        slidesPerView: 4,
        spaceBetween: 40
      },
      200: {
        slidesPerView: 3,
        spaceBetween: 40
      }
    },
    loop: false,
  }

  return(
    <div className="mx-0">
      <div className="text-md font-bold">Kategori Pilihan</div>
      <div className="mx-0 mt-4">
        <Swiper {...params}>
        {
          kategoriPilihan.map((item: {image: string, title: string, param:string}, idx: number) => {
            return(
              <Link to={`/detail-kategori?q=${item.param}`} key={`key kategoriPilihan - ${idx}`} className=" mr-2 py-4 flex  justify-center border border-gray-200 rounded-md cursor-pointer">
                <img src={item.image} alt={item.title} className="w-32"/>
              </Link>
            )
          })
        }
        </Swiper>
      </div>
    </div>
  )