如何在react-router-dom的<Link>标签内触发<a>标签的href跳转？

这个问题的核心原因是HTML规范明确禁止<a>标签嵌套<a>标签，而React Router的<Link>组件底层渲染出来的就是一个标准<a>标签。当你点击内部的<a id="wfu">时，点击事件会向上冒泡到外层的<Link>，触发它的跳转逻辑，所以最终跳转到了/graduate-posts，而非click.com。浏览器悬停时显示正确href是因为它识别到了内部a标签的属性，但点击事件的冒泡优先级更高。

下面给你几个可行的解决方案，按推荐程度排序：

1. 重构DOM结构（最推荐，符合HTML规范） #

把内部的<a>标签从<Link>里移出来，通过CSS定位保持原来的视觉位置。这样既避免了嵌套a标签的语义问题，也不会有事件冲突。

修改后的代码示例：

<div class="col-md-8">
  {/* 新增容器包裹Link和外部a标签 */}
  <div class="graduate-card-container">
    <Link id="homeLink" to="/graduate-posts">
      <img class="img-fluid" src="https://i.imgur.com/vekPedd.png" alt="Card image cap" />
      <div class="card-img-overlay">
        <div class="homeLinkTextContainer">
          <div id="homeLinkTitleContainer">
            <p id="homeLinkTitle">Graduates</p>
          </div>
          <div class="homeLinkText" id="homeLinkTextG">
            <p>Coming Soon! Want To <strong></strong></p>
          </div>
        </div>
      </div>
    </Link>
    {/* 把Write For Us的a标签移到外面，用CSS定位到对应位置 */}
    <a href="click.com" id="wfu" class="write-for-us-link">Write For Us?</a>
  </div>
</div>

对应的CSS（示例）：

.graduate-card-container {
  position: relative;
}

.write-for-us-link {
  position: absolute;
  /* 根据原来的位置调整top/left等值，比如： */
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 保持原来的样式 */
  color: inherit;
  font-weight: bold;
}

2. 阻止内部a标签的事件冒泡（快速临时解决方案） #

如果不想改动结构，可以给内部的<a>标签添加onClick事件，阻止事件冒泡到外层的<Link>。这样点击内部a时，只会触发它自己的跳转逻辑。

代码示例：

<div class="col-md-8">
  <Link id="homeLink" to="/graduate-posts">
    <img class="img-fluid" src="https://i.imgur.com/vekPedd.png" alt="Card image cap" />
    <div class="card-img-overlay">
      <div class="homeLinkTextContainer">
        <div id="homeLinkTitleContainer">
          <p id="homeLinkTitle">Graduates</p>
        </div>
        <div class="homeLinkText" id="homeLinkTextG">
          <p>Coming Soon! Want To 
            <strong>
              <a 
                href="click.com" 
                id="wfu" 
                onClick={(e) => {
                  // 阻止事件冒泡到外层Link
                  e.stopPropagation();
                }}
              > 
                Write For Us? 
              </a>
            </strong>
          </p>
        </div>
      </div>
    </div>
  </Link>
</div>

⚠️ 注意：这种方法虽然能快速解决问题，但本质上还是违反了HTML规范（嵌套a标签），可能在某些浏览器或辅助设备上出现兼容性问题，只推荐作为临时修复。

3. 替换Link为div+useNavigate钩子（灵活方案） #

把外层的<Link>换成普通的<div>，用React Router的useNavigate钩子手动处理跳转逻辑。这样内部的<a>标签完全不受影响，也避免了嵌套a标签的问题。

代码示例：

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

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

  // 处理外层容器的点击跳转
  const handleCardClick = () => {
    navigate('/graduate-posts');
  };

  return (
    <div class="col-md-8">
      <div 
        id="homeLink" 
        onClick={handleCardClick}
        style={{ cursor: 'pointer' }} // 添加指针样式，模拟Link的交互
      >
        <img class="img-fluid" src="https://i.imgur.com/vekPedd.png" alt="Card image cap" />
        <div class="card-img-overlay">
          <div class="homeLinkTextContainer">
            <div id="homeLinkTitleContainer">
              <p id="homeLinkTitle">Graduates</p>
            </div>
            <div class="homeLinkText" id="homeLinkTextG">
              <p>Coming Soon! Want To <strong><a href="click.com" id="wfu"> Write For Us? </a></strong></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

这种方案适合需要更复杂交互逻辑的场景，比如点击某些子元素时不触发跳转，可以在handleCardClick里判断事件目标。

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