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

Question

我正试图在使用create-react-app时，将react-router与reactstrap一起使用。

在路由页面中，我需要为reactstrap使用状态，所以我将路由从变量转换为类，但我得到了以下警告：

Warning: 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></li> */}
        </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>

{/* just more of the above */}

除了偶尔出现几个<li>靠近彼此，热更新有时不起作用以及我在控制台中获得的警告消息外，没有发生任何坏事，但当我阅读这个问题时，我发现我不应该这样做。

- Amr

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>

- ravibagul91

---

谢谢，第二个方法可行，但是现在界面混乱了，这就是我一开始使用reactstrap的原因，有没有办法修改第二个方法，以便我可以在其中使用reactstrap链接？ - Amr

@Amr 如果你不一定要使用reactstrap中的NavLink，那么"react-router-dom"包本身就可以提供NavLink，使用import {NavLink} from 'react-router-dom'即可。 - ravibagul91

这并没有解决我的错误，我正在使用Material UI，并且已经删除了所有Link/Nav.link标签，但错误仍然存在。 - Aditya Patnaik

@AdityaPatnaik 你能提供可运行的代码吗？我会尝试解决你的问题。 - ravibagul91

如果您正在使用React Bootstrap的Nav.Link和React Router的Link组件，则可以将Nav.Link的as属性设置为div来解决此问题。文档在这里。 - cpinamtz

@ravibagul91 None 是从哪里来的？ - sayinmehmet47

Answer 2

将componentClass更改为as属性并添加到原始的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>

- KSankar

---

@AdityaPatnaik，你需要从react-router-dom中导入它。 - ousecTic

如果是导入问题，它会抛出一个导入错误，不是吗？ - Aditya Patnaik

Answer 3

我建议一种替代解决方案，不仅可以解决你的问题，还能给你想要的结果。无论如何，如果像我一样有人偶然看到了这篇文章。

使用React Router DOM提供的Link jsx元素，但要添加className="nav-link"属性。 这将为您提供NavLink jsx所使用的样式，该样式由React Strap提供。

因此，它应该像这样：

<Link className="nav-link" id="RouterNavLink" style={None} to="/contact">anywords</Link>

- NAJAF SIKANDER

Answer 4

您可以尝试这个方法来避免错误。

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

- galo hernandez

---

在 TypeScript 中，它会抛出错误：“属性'as'不存在于类型'IntrinsicAttributes＆NavLinkProps＆RefAttributes <HTMLAnchorElement>'上”。 - sayinmehmet47

Answer 5

我也遇到了同样的问题。这是因为我们不能在另一个链接或a标签中使用它。

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

我想在导航栏中的a标签上应用className。因此，我在组件中将className应用于a标签，并在导航栏组件中导入该组件。

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

这是我在导航模板中使用此链接的方式，不需要任何类名

<LoginButton />

- smit agravat