reactjs - 警告 : Failed prop type: Invalid prop `tag` supplied to `NavLink`

Question

我目前正在尝试将分片仪表板集成到我的 React 应用程序中。一切都很好，除了搜索导航栏缩放得太大了。控制台给我以下错误:

"Warning: Failed prop type: Invalid prop tag supplied to NavLink. in NavLink (at SidebarNavItem.js:8)".

提到的文件如下所示:

import React from "react";
import PropTypes from "prop-types";
import { NavLink as RouteNavLink } from "react-router-dom";
import { NavItem, NavLink } from "shards-react";

const SidebarNavItem = ({ item }) => (
  <NavItem>
    <NavLink tag={RouteNavLink} to={item.to}>
      {item.htmlBefore && (
        <div
          className="d-inline-block item-icon-wrapper"
          dangerouslySetInnerHTML={{ __html: item.htmlBefore }}
        />
      )}
      {item.title && <span>{item.title}</span>}
      {item.htmlAfter && (
        <div
          className="d-inline-block item-icon-wrapper"
          dangerouslySetInnerHTML={{ __html: item.htmlAfter }}
        />
      )}
    </NavLink>
  </NavItem>
);

SidebarNavItem.propTypes = {
  /**
   * The item object.
   */
  item: PropTypes.object
};

export default SidebarNavItem;

我已经用谷歌搜索了很多，但我发现的所有相关错误都是由一些不属于我的代码的组件引起的。

Answer 1

我有完全相同的问题，使用相同的框架。

问题是这一行:

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

似乎这个导入语法将 Component(函数)转换为引用，这就是为什么您在登录控制台时获得 Object 的原因。 tag 属性输入错误。

解决问题的基本解决方法:

<NavLink tag={(props) => <RouteNavLink {...props} />} to={item.to}>