React自定义按钮嵌套a标签无法跳转外部链接如何解决

问题根因 #

当前实现存在两个核心问题，也是功能无感知失效的根本诱因：

1. HTML嵌套规范违规：<button>属于交互式表单元素，HTML标准明确禁止其内部嵌套<a>这类其他交互式元素。浏览器对非法嵌套的DOM结构没有统一的容错标准，之前能正常运行属于浏览器容错的偶然结果，一旦遇到浏览器版本更新、React渲染逻辑调整（比如React 18的水合机制变动）、依赖包版本升级，都会出现DOM结构被自动修正、点击行为异常的问题。
2. CSS层叠遮挡：按钮的::after伪元素采用绝对定位，尺寸和按钮完全一致，且没有设置pointer-events: none，该伪元素会直接盖在内部的<a>标签上方，所有点击事件实际都触发在伪元素上，根本无法到达链接标签。一旦样式生成顺序变动导致伪元素层级高于链接，就会直接阻断跳转。

排查思路 #

• 打开浏览器开发者工具的Elements面板，查看实际渲染的DOM结构，确认<a>标签是否被浏览器自动移出<button>外部，是否存在结构异常
• 使用开发者工具的元素选取功能，直接点击按钮的可点击区域，查看当前命中的元素是<a>、<button>还是按钮的::after伪元素
• 给<a>标签绑定临时点击日志，点击按钮时观察日志是否触发，确认点击事件是否被拦截
• 核对元素嵌套的语义规范，排查是否存在交互式元素互相嵌套的非法写法

修复方案 #

优先推荐语义化写法，完全移除多余的<button>标签，直接将按钮样式绑定到<a>标签上，从根源规避嵌套违规和层级问题：

import React from "react";
import styled from "styled-components";

const Btn = styled.a`
  display: inline-block;
  background-color: ${(props) => props.theme.text};
  color: ${(props) => props.theme.body};
  outline: none;
  border: none;
  text-decoration: none;

  font-size: ${(props) => props.theme.fontsm};
  padding: 0.9rem 2.3rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;

  &:hover {
    transform: scale(0.9);
  }

  &::after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    border: 2px solid ${(props) => props.theme.text};
    width: 100%;
    height: 100%;
    border-radius: 50px;
    transition: all 0.2s ease;
    pointer-events: none;
  }

  &:hover::after {
    transform: translate(-50%, -50%) scale(1);
    padding: 0.3rem;
  }
`;

const Button = ({ text, link }) => {
  return (
    <Btn href={link} aria-label={text} target="_blank" rel="noreferrer">
      {text}
    </Btn>
  );
};

export default Button;

该写法完全兼容原有组件的调用方式，业务侧的<Button />组件使用代码不需要做任何修改。

如果业务场景必须保留<button>元素（比如需要兼容表单提交、绑定自定义点击逻辑），则移除内部嵌套的<a>标签，通过按钮的点击事件触发跳转即可：

const Button = ({ text, link }) => {
  const handleClick = () => {
    window.open(link, '_blank', 'noreferrer');
  };
  return (
    <Btn onClick={handleClick} aria-label={text}>
      {text}
    </Btn>
  );
};

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