React - 在 Link 中添加点击事件

2022 年 7 月 6 日

问题描述

在 React 中使用 Link 进行路由跳转的时候, 用户自定义的点击事件将无法运行.

如下代码所示, 在 console 中将不会有任何输出. handleClick 不会被调用.

function Demo() {
  
  function handleClick() {
    console.log("点击事件");
  }
  
  return (
    <div>
      <Link to={'/home'} onClick={handleClick}>
        主页
      </Link>
    </div>
  );
}

解决方法

只需要将点击事件交给 Link 中的元素即可. 如下所示:

function Demo() {
  
  function handleClick() {
    console.log("点击事件");
  }
  
  return (
    <div>
      <Link to={'/home'}>
        <span onClick={handleClick}>
          主页
        </span>
      </Link>
    </div>
  );
}

参考资料

github 讨论区