将React-Slick与查询参数同步

import React, { useState, useEffect } from 'react';
import { useHistory, useLocation } from 'react-router-dom';
import Slider from 'react-slick';

const Carousel = () => {
  const history = useHistory();
  const location = useLocation();
  const [currentSlide, setCurrentSlide] = useState(0);

  useEffect(() => {
    const params = new URLSearchParams(location.search);
    const slide = parseInt(params.get('slide'), 10) || 0;
    setCurrentSlide(slide);
  }, [location.search]);

  const handleSlideChange = (index) => {
    setCurrentSlide(index);
    const params = new URLSearchParams(location.search);
    params.set('slide', index);
    history.push(`?${params.toString()}`);
  };

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    initialSlide: currentSlide,
    afterChange: handleSlideChange,
  };

  return (
    <Slider {...settings}>
      <div>
        <h3>Slide 1</h3>
      </div>
      <div>
        <h3>Slide 2</h3>
      </div>
      <div>
        <h3>Slide 3</h3>
      </div>
    </Slider>
  );
};

export default Carousel;