react-router-dom的Link组件置于div内不生效，渲染a标签正常无法跳转如何解决

• 包裹图片的Link组件缺失必填的to属性。错误代码示例中，包裹img的Link只写了className属性，没有配置跳转目标to='candidate-info'，无法触发正确跳转。
• 违反HTML交互元素嵌套规范。将<button>元素放在Link渲染出的<a>标签内部，按照HTML标准，<a>和<button>都属于可交互原生元素，嵌套使用会导致浏览器阻止点击事件的默认行为，跳转逻辑无法触发。
• 覆盖层层级拦截了点击事件。代码中存在类名为overlay的覆盖层元素，它在DOM结构中和卡片同级、且默认层级高于卡片内部的Link元素，点击操作会被这个覆盖层优先捕获，无法传递到下层的Link标签上。

1. 补全Link的to属性
   给包裹图片的Link补充跳转目标配置：

<Link to='candidate-info' className={styles["image-container"]}>
  <img src="/uploads/profile.jpeg" className="card-img-top fluid" alt="..." />
</Link>

2. 修复交互元素嵌套问题
   移除Link内部的button元素，直接给Link添加按钮样式即可：

<Link to='candidate-info' className="btn btn-sm btn-info">More info</Link>

如果需要保留button元素，也可以使用编程式跳转替代Link嵌套：

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

// 组件内部逻辑
const navigate = useNavigate()
// 渲染部分代码
<button 
  className="btn btn-sm btn-info"
  onClick={() => navigate('candidate-info')}
>
  More info
</button>

3. 解决覆盖层点击拦截问题
   给overlay元素添加CSS样式，使其不响应鼠标事件，让点击可以穿透到下层元素：

.overlay {
  pointer-events: none;
}

如果overlay本身需要响应点击事件，可以调整内部Link的z-index属性，设置为高于overlay的层级即可。

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