如何在 Material UI 菜单中使用 Next.js Link（下一个/链接）组件？

Question

我有一个 Material ui 菜单，如下所示：

<Menu id="simple-menu" anchorEl={anchorEl} keepMounted open={!!anchorEl} onClose={handleClose}>
    <MenuItem onClick={handleClose}>Profile</MenuItem>
    <MenuItem onClick={handleClose}>Log Out</MenuItem>
</Menu>

并希望将 next.jsLink标签与MenuItem. 做这个的最好方式是什么？

我尝试了以下操作：

---

以下代码不会渲染<a>标签，而是将 href 添加到<li>标签中。

<Link href={'#'} passHref><MenuItem onClick={handleClose}>Log Out</MenuItem></Link>

我可以向 MenuItem 添加一个道具来渲染<a>而不是<li>标记，但是，由于菜单嵌套在<ul>标记下，我不确定是否是<ul><a>Log Out</a></ul>一个好主意

---

下面抛出一个错误

<MenuItem onClick={handleClose} component={<Link href={'#'}>Log Out</Link>}></MenuItem>

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

Answer 1

正如另一个答案中提到的，在标签Link内给出标签将按要求工作，对于样式问题，您必须在标签内MenuItem给出textDecoration: 'none'和以避免文本的下划线和蓝色。color: '#000'LinkLink

<MenuItem>
   <Link 
      style={{
          textDecoration: 'none', 
          color: '#000'
      }}
      href="#"
   >
    Log Out
   </Link>
</MenuItem>