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

Posted 2023-02-21

【中文标题】警告：validateDOMNesting(...): <a> 不能作为 <a> 的后代出现

【英文标题】：Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>

【发布时间】：2019-09-01 16:08:26

【问题描述】：

我正在尝试在 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 在随机时间彼此靠近并且我有时不得不刷新页面而不是正常行为（自动刷新）和我在控制台中收到的警告消息之外，没有什么不好的事情发生，但是当我阅读了这个问题，我发现我不应该这样做。

【参考方案1】：

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

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

【参考方案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>

【讨论】：

@AdityaPatnaik，你必须从 react-router-dom 导入它

如果是导入问题，它会抛出导入错误。不是吗？

【参考方案3】：

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

使用 react router dom 提供的 Link jsx 元素，但添加 classname="nav-link" 到它。这将为您提供反应带正在使用的 NavLink jsx 的样式。

【参考方案4】：

这是导致错误的代码，

<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>

【讨论】：

感谢第二个工作，但现在用户界面搞砸了，这就是为什么我首先使用 reactstrap，有没有办法修改第二个，所以我可以在其中使用 reactstrap 链接？

@Amr 如果您不只能从 reactstrap 使用 NavLink，那么“react-router-dom”包本身会为您提供 NavLink，请使用 import NavLink from 'react-router-dom' .

这并没有解决我的错误，我使用的是材料 ui，我已经删除了所有 Link/Nav.link 标签，但错误仍然存​​在

@AdityaPatnaik 你能提供工作吗？将尝试解决您的问题。

如果你使用 React Bootstrap 的 Nav.Link 和 React Router 的 Link 组件，你可以解决这个设置 Nav.Link 的 as 属性为 div。文档here