React-slick: React Router Link not updated with React Slick fade: true;

[firestar300]

Hello,

I have a weird issue when I use React Slick with React Router and Link components.

App.js

import React from "react";
import Slider from "react-slick";
import { BrowserRouter, Link } from "react-router-dom";

import "slick-carousel/slick/slick.css";
import "./styles.css";

function App() {
  const sliderSettings = {
    dots: true,
    infinite: true,
    fade: true,
    slidesToShow: 1,
    slidesToScroll: 1
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Slider {...sliderSettings} className="carousel">
        <Link to="/page-1">
          <div>
            <img src="https://via.placeholder.com/350x150" />
            Page 1
          </div>
        </Link>
        <Link to="/page-2">
          <div>
            <img src="https://via.placeholder.com/350x150" />
            Page 2
          </div>
        </Link>
        <Link to="/page-3">
          <div>
            <img src="https://via.placeholder.com/350x150" />
            Page 3
          </div>
        </Link>
      </Slider>
    </div>
  );
}

As you can see, every "slide" of the Slick carousel has a Link component with a different "to" props value (page-1, page-2 etc..). However, when the active slide is the page-1 and I click into the slide, I'm redirected to the page-3.

It works as expected if the fade option is false.

You can reproduce it here : CodeSandBox

[robhimslf]

I ran into the same issue. The issue (not really an issue; the library behaves in the least-intrusive manner possible to meet most use cases) is that react-slick simply toggles the opacity on active/inactive slides. It doesn't set visibility, which is key. Without setting visibility, the last layer in the stack is still able to impact link behavior in the DOM. Depending on your circumstances, this might work for you. It worked for me.

.slick-slide {
  visibility: hidden;
}
.slick-slide.slick-active {
  visibility: visible;
}

Your example, using my suggested workaround: CodeSandbox

[firestar300]

Oh good idea, thanks !

[natali-gracia]

It's awesome! Thanks!

[golfcrseven]

@robhimslf Thanks.

[WashingtonLuiz99]

@robhimslf Thanks!