React-Router-DOM v6中<a>嵌套<a>警告问题求助

你遇到的Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>警告，根源是代码里外层的<Link>直接包裹了下拉菜单里的<Link>——React-Router的<Link>最终会渲染成原生<a>标签，而HTML规则不允许<a>嵌套<a>，所以触发了DOM验证警告。

修复方案 #

核心是彻底移除<Link>的嵌套结构，根据你的需求选择两种调整方式：

方式一：Fitness仅作为下拉触发器（不跳转）

把外层用来触发下拉的<Link>换成普通元素（比如<span>），保留原有样式和交互逻辑：

<ul className="flex text-white text-xl items-center gap-10">
  <li className="cursor-pointer">
    <Link to="/" className=" text-green-700 hover:text-green-500 hover:border-b-4 border-green-400">Home</Link>
  </li>
  <li className="cursor-pointer dropdown">
    <span className="dropbtn text-green-700 hover:text-green-500 hover:border-b-4 border-green-400 cursor-pointer">
      <span>Fitness</span>
      <ul className="dropdown-content flex-col gap-3 p-2 text-green-900">
        <li className="text-lg hover:text-green-500">
          <Link to='/bobo' role='link'>Beginners</Link>
        </li>
      </ul>
    </span>
  </li>
</ul>

方式二：Fitness本身需要跳转+展开下拉

如果点击Fitness需要跳转到首页，同时展开下拉菜单，把下拉菜单从<Link>内部移出来，作为兄弟元素通过父容器控制显示：

<ul className="flex text-white text-xl items-center gap-10">
  <li className="cursor-pointer">
    <Link to="/" className=" text-green-700 hover:text-green-500 hover:border-b-4 border-green-400">Home</Link>
  </li>
  <li className="cursor-pointer dropdown relative">
    <Link to="/" className="dropbtn text-green-700 hover:text-green-500 hover:border-b-4 border-green-400">
      Fitness
    </Link>
    <ul className="dropdown-content absolute flex-col gap-3 p-2 text-green-900 hidden">
      <li className="text-lg hover:text-green-500">
        <Link to='/bobo' role='link'>Beginners</Link>
      </li>
    </ul>
  </li>
</ul>

注意事项 #

如果之前参考Stack Overflow方案没解决，大概率是没彻底消除<Link>的嵌套——比如只是修改了外层标签但仍有隐含的<a>嵌套，或者用了其他组件但最终还是生成了嵌套的<a>。只要保证所有<Link>（或原生<a>）都是平级或父子关系中不存在嵌套，就能解决这个警告。

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