Javascript React slick和React路由器链路不存在'；不要区分点击和拖动

我正在尝试使用

react-router-dom

将我光滑的滑块幻灯片链接到一个关于页面。问题是它没有区分拖动和单击。我将如何实现这一点，是否有一种方法可以使用react router实现，或者我需要使用自己的代码添加JavaScript解决方案？这是我的代码：

从“React”导入React；
从“react slick”导入滑块；
从“react router dom”导入{Link}；
导入“./node_模块/slick carousel/slick/slick.css”；
导入“./node_modules/slick carousel/slick/slick theme.css”；
导入“/App.css”；
类。组件{
构造函数（）{
超级（）；
}
render（）{
常量设置={
点：错，
无限：错，
速度:500,，
幻灯片放映：5，
幻灯片滚动：3，
箭头：错，
响应：[
{
断点：1000，
设置：{
幻灯片放映：3，
幻灯片滚动：3，
},
},
{
断点：600，
设置：{
幻灯片放映：2，
幻灯片滚动：2，
},
},
],
};
返回(
单项
1.
2.
3.
4.
5.
6.
7.
);
}
}
导出默认电影；

我通过删除链接并改为使用JavaScript链接来修复它。它检查开始光标位置和结束光标位置，以查看是否拖动或单击了它

让鼠标点击开始；
让鼠标发送；
常数mousedowndtect=（e）=>{
mousePosStart=e.pageX；
}
常数mouseUpDetect=（e）=>{
mousePosEnd=e.pageX；
}
常量比较用法=（）=>{
log（`start:${mousePosStart}end:${mousepossend}`）；
让difference=mousePosStart-mousePosEnd；
if（差异===0）{
window.location.href=`./about`；
}
}

这可以通过简单的内置鼠标事件实现。下面给出了一个简单的例子

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>
);
}

import React，{useState}来自“React”；
从“@物料界面/核心/卡片”导入卡片；
从“@material ui/core/CardHeader”导入CardHeader；
从“@material ui/core/CardMedia”导入CardMedia；
从“react router dom”导入{useHistory}；
从“@material ui/core/Link”导入链接；
导出默认功能卡（）{
const history=useHistory（）；
const[mouseMoved，setMouseMoved]=useState（false）；
//console.log（r）
常量handleClick=（）=>{
如果（！mouseMoved）{
历史。推送（“/”）；
}
};
返回(
setMouseMoved（真）}
onMouseDown={（）=>setMouseMoved（false）}
onMouseUp={（）=>handleClick（）}
样式={{textDecoration:“无”，光标：“指针”}
>
{" "}
);
}