带有 Reactstrap 的 React-Router 导致警告

【问题标题】：React-Router with Reactstrap results in warning带有 Reactstrap 的 React-Router 导致警告
【发布时间】：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 呢？

【问题讨论】：

标签： react-router reactstrap

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

【讨论】：