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

Question

我正在尝试在 create-reat-app 中使用 react-router 和 reactstrap。在路由页面我需要为 reactstrap 使用状态所以我将路由器从变量转换为 class.I 得到这个警告：警告：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 文档

或View Screenshot

原文：

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

新：

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

Answer 3

我想推荐一个替代解决方案，它不仅可以解决您的问题，还可以为您提供所需的结果。无论如何，其他人像我一样偶然发现了这个 post。

使用反应路由器 dom 提供的 Link jsx 元素，但向其添加 classname="nav-link"。这将为您提供反应带正在使用的 NavLink jsx 的样式。

Answer 4

你可以试试这个以避免错误

<NavItem as="li"> <Link>.....

Answer 5

我有同样的问题。这是因为我们不能使用link，或者一个标签里面另一个像...

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

我想将 className 应用到导航栏中的 a 标签。所以我将 className 应用于组件中的标签，并将该组件导入导航栏组件

<a className="nav-link" onClick={() => loginWithRedirect()}>
    Login
  </a>

这就是我在导航模板中使用这个 link 的方式，没有任何类名

<LoginButton />

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

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

reactjs

react-router

create-react-app

reactstrap