reactjs - 如何在 Material UI 菜单中使用 Next.js Link (next/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.js Link带有 MenuItem 的标签.做这个的最好方式是什么？
我尝试了以下几件事:

以下不会呈现 <a>标记，但将 href 添加到 <li>标签。

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

我可以向 MenuItem 添加一个 Prop 来渲染 <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'内Link标签以避免 Link 的下划线和蓝色文本。

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