React slick and React router Link doesn't distinguish click and drag

user_10133074 0
Viewed 1696

I'm trying to make my slick slider slides link to an about page with react-router-dom. 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:

import React from "react";
import Slider from "react-slick";
import { Link } from "react-router-dom";
import "../node_modules/slick-carousel/slick/slick.css";
import "../node_modules/slick-carousel/slick/slick-theme.css";
import "./App.css";

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 (
      <div className="App">
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>1</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>2</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>3</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>4</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>5</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>6</h3>
              </div>
            </Link>
          </div>
          <div className="slickWrapper">
            <Link to="/about">
              <div className="customSlick">
                <h3>7</h3>
              </div>
            </Link>
          </div>
        </Slider>
      </div>
    );
  }
}

export default Movies;
react-slick react-router-dom reactjs javascript
3 Answers

This can be achieved with simple built-in mouse events. A minimal example is given below.

import React, { useState } from "react";
import Card from "@material-ui/core/Card";
import CardHeader from "@material-ui/core/CardHeader";
import CardMedia from "@material-ui/core/CardMedia";
import { useHistory } from "react-router-dom";
import Link from "@material-ui/core/Link";

export default function Card() {
const history = useHistory();
const [mouseMoved, setMouseMoved] = useState(false);
// console.log(r)
const handleClick = () => {
    if (!mouseMoved) {
    history.push("/");
    }
};

return (
    <Card className={classes.root}>
    <CardHeader />
    <Link
        onMouseMove={() => setMouseMoved(true)}
        onMouseDown={() => setMouseMoved(false)}
        onMouseUp={() => handleClick()}
        style={{ textDecoration: "none", cursor: "pointer" }}
    >
        <CardMedia image="" title="">
        {" "}
        </CardMedia>
    </Link>
    </Card>
);
}
user_111268050

I fixed it by removing Link and linking with JavaScript instead. It checks start cursor position and end cursor position to see if it was dragged or clicked.

        let mousePosStart; 
        let mousePosEnd; 
        const mouseDownDetect = (e) => {
            mousePosStart = e.pageX;
        }
        const mouseUpDetect = (e) => {
            mousePosEnd = e.pageX;
        }
        const compareMouse = () => {
            console.log(`start: ${mousePosStart}   end: ${mousePosEnd}`);
            let diffrence = mousePosStart - mousePosEnd;
            if (diffrence === 0) {
                window.location.href = `./about`;
            }
        }
user_101330740

I had exactly the same problem, here is the best solution:

const onLinkMouseDown = (e) => {
    e.preventDefault();
}

<a
  href={href}
  onMouseDown={onLinkMouseDown}
  key={index}
>
 ...slideContent
</a>
user_192821750
Related