title: React slick and React router Link doesn't distinguish click and drag
body: <p>I'm trying to make my slick slider slides link to an about page with <code>react-router-dom</code>. The problem is that it doesn't distinguish between a drag and a click. How would I make that happen, is there a way to do it with react router or would I need to add a JavaScript solution in with my own code? This is my code:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import Slider from &quot;react-slick&quot;;
  import { Link } from &quot;react-router-dom&quot;;
  import &quot;../node_modules/slick-carousel/slick/slick.css&quot;;
  import &quot;../node_modules/slick-carousel/slick/slick-theme.css&quot;;
  import &quot;./App.css&quot;;
  
  class Movies extends React.Component {
    constructor() {
      super();
    }
    render() {
      const settings = {
        dots: false,
        infinite: false,
        speed: 500,
        slidesToShow: 5,
        slidesToScroll: 3,
        arrows: false,
        responsive: [
          {
            breakpoint: 1000,
            settings: {
              slidesToShow: 3,
              slidesToScroll: 3,
            },
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
              slidesToScroll: 2,
            },
          },
        ],
      };
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;h2&gt; Single Item&lt;/h2&gt;
          &lt;Slider {...settings}&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;1&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;2&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;3&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;4&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;5&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;6&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
            &lt;div className=&quot;slickWrapper&quot;&gt;
              &lt;Link to=&quot;/about&quot;&gt;
                &lt;div className=&quot;customSlick&quot;&gt;
                  &lt;h3&gt;7&lt;/h3&gt;
                &lt;/div&gt;
              &lt;/Link&gt;
            &lt;/div&gt;
          &lt;/Slider&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Movies;
  </code></pre>