点击<Link to="###">时如何弹出JavaScript确认框？已尝试方案无效

嗨，我明白你现在遇到的问题——想让用户点击React的<Link>组件时先弹出确认框，确认后再跳转，但之前的写法没生效对吧？这是因为React的合成事件机制和<Link>组件的默认行为需要特殊处理，我给你两种可行的解决方案：

方案一：直接在Link组件上使用onClick事件处理 #

React里的事件属性需要用驼峰式命名（onClick而非小写的onclick），并且要显式阻止默认跳转行为，代码示例如下：

<Link 
  to="###" 
  onClick={(e) => {
    // 如果用户点击取消，阻止Link的默认跳转行为
    if (!confirm('Are you sure?')) {
      e.preventDefault();
    }
  }}
>
  XYZ
</Link>

原理是：当用户点击Link时，先触发我们的onClick函数，弹出确认框。如果用户选择“取消”，就调用e.preventDefault()阻止Link的默认跳转动作；如果选择“确认”，则不做阻止，让Link正常跳转到目标路由。

方案二：使用useNavigate钩子手动控制跳转（更灵活） #

如果你需要更复杂的逻辑，或者不想依赖<Link>组件的默认行为，可以用React Router提供的useNavigate钩子，手动处理点击和跳转逻辑：

import { useNavigate } from 'react-router-dom';

function YourComponent() {
  const navigate = useNavigate();

  const handleConfirmAndNavigate = () => {
    if (confirm('Are you sure?')) {
      // 用户确认后，跳转到目标路由
      navigate('###');
    }
  };

  return (
    // 这里可以用按钮、普通文本等元素，替换Link组件
    <span style={{ cursor: 'pointer' }} onClick={handleConfirmAndNavigate}>
      XYZ
    </span>
  );
}

这种方式完全由你控制跳转时机，适合需要添加额外逻辑（比如请求接口、状态更新）的场景。

为什么你之前的写法没生效？ #

• React中事件属性需要用驼峰式（onClick），小写的onclick不会被React正确识别；
• 直接return confirm(...)的方式在React合成事件中无法直接阻止<Link>的默认跳转，必须显式调用e.preventDefault()。

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