Question

我有一个带有品牌的导航栏，我希望该品牌成为主页的链接。

import { NavLink } from "react-router-dom";

.
.
.

<Navbar color="white" light expand="sm" className="py-0">
  <NavLink to="/">
    <NavbarBrand>
      <img src={ logo } />
    </NavbarBrand>   
  </NavLink >
</Navbar>

这会产生警告：

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by NavbarBrand)
    in NavbarBrand (at NavBar.js:53)
    in a (created by Link)
    in Link (created by Route)
    in Route (created by NavLink)

如何继续使用reactstrap与react-router？

Answer 1

<NavbarLink />和<NavbarBrand />都会呈现HTML锚点（<a>）。

通过传递一个作为另一个的孩子，你在另一个中渲染一个锚，这不是HTML有效的，这就是你的浏览器警告你的原因。

最简单的解决方案是使用tag属性选择要渲染的组件，并使用函数定义特定的道具，例如to="..."：

<Navbar color="white" light expand="sm" className="py-0">
  <NavbarBrand tag={(props) => <NavLink to="/" {...props} />}>
    <img src={ logo } />
  </NavbarBrand >
</Navbar>

PS：注意不要混淆reactstrap <NavLink />和react-router <NavLink /> :) 如果需要，请使用重命名的导入。

使用Reactstrap的React-Router导致警告

1 个答案: