React-Router with Reactstrap导致警告

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 />都呈现一个超文本标记语言锚(<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 /> :)混淆在一起，如果需要的话，可以使用重命名的导入。