如何将 MenuItem 用作 NavLink？答案

【问题标题】：How to use MenuItem as a NavLink?如何将 MenuItem 用作 NavLink？
【发布时间】：2019-11-21 07:42:34
【问题描述】：

我正在尝试使用菜单列表来浏览我的应用程序。虽然，应用程序和路由运行良好，但我在控制台中使用这段代码收到了一些警告：

{props.itemList.map((item, index) =>(
        <div key={index}>
          <MenuItem component={NavLink} to={item.to} onClick= 
              {handleClose} activeClassName={classes.topNavLinkActive} 
              className={classes.topNavLink}>
            {item.name}
            <Icon className={classes.navIcon}>{item.icon}</Icon>
          </MenuItem>
        </div>
      ))}

我收到的警告是：警告：失败的道具类型：无效的道具component 提供给ForwardRef(ButtonBase)。需要一个可以保存引用的元素类型。您是否不小心提供了一个普通的功能组件？

index.js:1375 警告：函数组件不能被赋予 refs。尝试访问此 ref 将失败。你的意思是使用 React.forwardRef() 吗？

有人能解释一下为什么这里需要前向引用吗？

【问题讨论】：

先生，您能解决这个问题吗？

标签： reactjs material-ui react-router-dom

【解决方案1】：

似乎错误与滥用component 属性有关。文档说：

用于根节点的组件。使用 DOM 元素或组件的字符串。

根据MenuItem API，component 属性的类型为elementType。类型定义文件将显示它正在实现 JSX.IntrinsicElements 接口（描述标准 HTML 标记）。

NavLink 元素是一个 React 组件。尝试提供标准的 html 标记名称 (string) 或实际的 DOM 节点引用。

【讨论】：