警告：validateDOMNesting(...): <a> 不能作为 <a> 的后代出现

Question

我正在尝试在 create-reat-app 中使用 react-router 和 reactstrap。在路由页面中，我需要使用 reactstrap 的状态，因此我将路由器从变量转换为类。我收到此警告：警告： validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 我不知道该怎么做？，我需要使用 reactstrap 来设置路由器导航的样式，所以我做了你在下面看到的。

由于很多原因，这不起作用：

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>

<Navbar  dark id="RouterNavbar" expand="md">
          <NavbarBrand id="NavBrand"href="#x"><ul>(a bunch of li not relevant)</ul></NavbarBrand>
<NavbarToggler id="NavBarToggler"  onClick={this.toggle1.bind(this)}  />
          <Collapse  isOpen={this.state.isOpen1}  navbar>
            <Nav   className="ml-auto"  navbar>
            <NavItem>
                <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
              </NavItem>
(then just more of the above)

除了几个 li 随机靠近彼此，我有时不得不刷新页面而不是正常行为（自动刷新）和我在控制台中收到的警告消息，没有什么不好的事情发生，但是当我读到这个的时候问题我发现我不应该这样做。

Answer 1

这是导致错误的代码，

<NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>

转换为，

<a><a></a></a>

所以你得到错误，

Warning: validateDOMNesting(…): <a> cannot appear as a descendant of <a>

要解决这个问题，只需使用以下方法之一，

<NavLink id="RouterNavLink" style={None} to="/contact">anywords</NavLink>

或者，

<Link id="RouterNavLink" style={None} to="/contact">anywords</Link>

Answer 2

将as道具（以前componentClass）添加到您的原件中NavLink以保持样式，同时消除警告。

看 react-bootstrap#nav-link-props文档

或者 查看截图

原来的：

<NavLink href="#x">
  <Link id="RouterNavLink" style={None} to="/contact">anywords</Link>
</NavLink>

新的：

<Nav.Link as={Link} to="/contact">anywords</Nav.Link>