被react-router Link包裹的div如何触发自身点击事件且不触发路由跳转？

你可以通过在内部div的点击事件回调中阻止默认行为与事件冒泡实现需求，具体方案如下：

方案1：固定禁用Link跳转 #

在handleClick方法中添加阻止逻辑即可，点击该div时只会触发你自定义的业务逻辑，不会触发Link路由跳转：

// 事件处理逻辑
handleClick = (e) => {
  // 阻止a标签默认跳转行为
  e.preventDefault()
  // 阻止事件冒泡到外层Link组件
  e.stopPropagation()

  // 此处写你的业务逻辑
  console.log('内部点击事件触发')
}

// 组件结构保持原有写法即可
<Link to={`/somewhere`}>
  <div onClick={this.handleClick}>
    ....some other div container...
  </div>
</Link>

方案2：按需控制是否禁用跳转 #

如果需要根据业务状态动态判断是否要触发Link跳转，可在事件处理中添加条件判断：

handleClick = (e) => {
  // 示例：当isSkipJump状态为真时，禁用Link跳转，仅执行自定义逻辑
  if (this.state.isSkipJump) {
    e.preventDefault()
    e.stopPropagation()
    // 自定义业务逻辑
  }
  // 状态不满足时不做拦截，正常触发Link跳转
}

实现原理 #

react-router的Link组件本质上会渲染为原生<a>标签，点击内部元素时事件会冒泡到外层<a>标签，触发默认的跳转行为。通过e.preventDefault()可以直接阻止<a>标签的默认跳转，e.stopPropagation()可以避免事件冒泡到Link组件触发内部封装的导航逻辑，双重拦截确保不会发生路由跳转。

内容的提问来源于stack exchange，提问作者Burak Harun Yıldız