react-router - 带有 Reactstrap 的 React-Router 导致警告

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 />:) 如果需要，请使用重命名的导入。