如何阻止点击NavLink内部元素时触发NavLink的跳转行为

阻止点击内部div触发跳转的实现方式 #

你之前只用e.preventDefault()效果不完整是因为NavLink的跳转逻辑是监听父元素上的click事件触发的，点击内部div时，事件会默认向上冒泡到NavLink组件，所以需要同时阻止事件冒泡和默认行为：

<NavLink to="/path">
  <div onClick={(e) => {
    e.stopPropagation(); // 阻止click事件冒泡到父级NavLink
    e.preventDefault();
    // 此处保留你的原有业务逻辑
  }}>
    {/* 内部元素 */}
  </div>
</NavLink>

添加e.stopPropagation()后，click事件不会传递到外层的NavLink，就能完全避免跳转触发。

输入框onChange事件的触发逻辑 #

输入框的onChange事件不会触发NavLink的跳转行为。NavLink仅会响应click事件来执行跳转逻辑，onChange是独立的输入值变更事件，和click事件没有关联，只有点击输入框的动作如果没有做冒泡拦截时才会触发跳转，输入内容、修改值触发onChange的过程完全不会触发跳转。

内容的提问来源于stack exchange，提问作者Carlos Escobar