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

【问题标题】：Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>警告：validateDOMNesting(...): <a> 不能作为 <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 在随机时间彼此靠近并且我有时不得不刷新页面而不是正常行为（自动刷新）和我在控制台中收到的警告消息之外，没有什么不好的事情发生，但是当我阅读了这个问题，我发现我不应该这样做。

【问题讨论】：

标签： reactjs react-router create-react-app reactstrap

【解决方案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