带有 Reactstrap 的 React-Router 导致警告

Posted 2023-03-23

【中文标题】带有 Reactstrap 的 React-Router 导致警告

【英文标题】：React-Router with Reactstrap results in warning

【发布时间】：2018-09-08 09:46:53

【问题描述】：

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

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 呢？

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