如何在 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中添加一个属性来渲染<a>而不是<li>标记，但由于菜单嵌套在<ul>标记下，我不确定是否将<ul><a>Log Out</a></ul>作为好方法。

---

以下代码会抛出错误。

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

错误：元素类型无效：期望为字符串（用于内置组件）或类/函数（用于复合组件），但得到了对象。

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

- Arximede

Answer 1

如其他答案所述，在MenuItem标记内使用Link标记将按要求起作用，对于样式问题，您需要在Link标记中添加textDecoration：'none'和color：'#000'以避免出现Link文本的下划线和蓝色。

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

- theWellHopeErr

---

在nextJS的<Link />组件上不存在style。 - Duderino9000

我选择了这个变体：<Link style={{textDecoration: 'inherit', color: 'inherit'}}>。 - icio

Answer 2

这是我使用的方法，同时禁用了“菜单中常规的蓝色带下划线链接”：

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

- Bogdan C.

Answer 3

你可以将“Link”组件放在“MenuItem”组件内部。

<MenuItem><Link href="#">Log Out</Link></MenuItem>

- Nikolai Kiselev

---

这似乎可以工作，但是我在菜单中得到了常规的带下划线的蓝色链接。我认为它覆盖了样式？你知道我是否可以保留菜单项的样式吗？ - Arximede

@Arximede，您可以更改样式或更改“链接”组件呈现的元素。 - Nikolai Kiselev

Answer 4

我认为其他答案实际上是相反的，这会破坏MenuItem的正常布局。（对我来说，菜单项变得更高，文本太低了。）这种方法效果更好，而且不需要尝试自己重新定义<a>标签的样式：

<NextLink href="#" passHref>
  <MenuItem component="a">
    Log Out
  </MenuItem>
</NextLink>

- Trevor Robinson

Answer 5

<MenuItem>中的组件属性是用于根节点的组件。 可以是要使用的HTML元素或组件的字符串。默认为<li>，正如material-ui官方所说。

如果您想保持<ul><li></li></ul>结构，则必须将您的<Link>组件嵌套在<MenuItem>组件中。

所以这可能是您想要的。

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

- m-nis

Answer 6

在链接内添加一个标签。

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

- Muhaimin CS

---

我收到了一个错误： 错误：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件），但得到对象。 - Arximede

Answer 7

看看下面的代码是否修复了这个问题：错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件），但得到了对象。

const ALink = ({ url, linkText }) => <Link href={url}>
    <a>{ linkText }</a>
</Link>    
<MenuItem onClick={handleClose} component={ ALink({url: '#', linkText: 'Log Out') }></MenuItem>

- Grey