React-Router搭配Reactstrap出现<a>不能嵌套在<a>内的警告问题

这个警告的根源很明确：Reactstrap的NavbarBrand组件默认会渲染成一个<a>标签，而你用react-router-dom的NavLink（同样会输出<a>）把它包裹起来，就造成了HTML里<a>嵌套<a>的非法结构，这自然会触发React的DOM嵌套验证警告。

这里有两种简单有效的解决方式：

方法一：利用NavbarBrand的tag属性指定渲染为NavLink #

Reactstrap的大部分组件都支持通过tag属性自定义根元素的类型，我们可以直接把NavLink传给NavbarBrand的tag，让它用NavLink替代默认的<a>来渲染，这样就不会有嵌套问题了：

import { Navbar, NavbarBrand } from 'reactstrap';
import { NavLink } from 'react-router-dom';

// ...你的组件代码
<Navbar color="white" light expand="sm" className="py-0">
  <NavbarBrand tag={NavLink} to="/">
    <img src={logo} alt="品牌标识" />
  </NavbarBrand>
</Navbar>

这种方式既能保留NavbarBrand自带的样式，又能完美集成React Router的导航功能。

方法二：手动构建导航链接（绕过NavbarBrand） #

如果你更倾向于手动控制结构，可以直接用NavLink包裹图片，并加上Reactstrap给NavbarBrand默认使用的navbar-brand类名，这样样式和功能都能和原来保持一致：

import { Navbar } from 'reactstrap';
import { NavLink } from 'react-router-dom';

// ...你的组件代码
<Navbar color="white" light expand="sm" className="py-0">
  <NavLink to="/" className="navbar-brand">
    <img src={logo} alt="品牌标识" />
  </NavLink>
</Navbar>

这种方式更灵活，适合需要对导航链接结构做更多自定义的场景。

两种方法都能彻底解决<a>嵌套的警告问题，你可以根据自己的代码习惯选择其中一种~

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