如何使用物料界面菜单中的Next.js Link(Next/link)组件？

wj8zmpe1 于 2022-10-21 发布在其他

关注(0)|答案(7)|浏览(318)

我有一个材料用户界面菜单，其方式如下：

<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>

错误：元素类型无效：应为字符串(对于内置组件)或类/函数(对于复合组件)，但GET：Object。

next.js

来源：https://stackoverflow.com/questions/64706698/how-to-use-next-js-link-next-link-component-in-a-material-ui-menu

7条答案

按热度按时间

6bc51xsx1#

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

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

赞(0）回复(0）举报 2022-10-21

m528fe3b2#

这就是对我有效的方法，它还禁用了菜单中带下划线的常规蓝色链接：

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

赞(0）回复(0）举报 2022-10-21

uemypmqf3#

您可以将“Link”组件放在“MenuItem”组件中。

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

赞(0）回复(0）举报 2022-10-21

waxmsbnn4#

添加标记内部链接

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

赞(0）回复(0）举报 2022-10-21

oogrdqng5#

UI官员说，<MenuItem>内部的组件道具是The component used for the root node. Either a string to use a HTML element or a component.，默认为<li>作为材料。
如果希望保留<ul><li></li></ul>结构，则必须将<Link>组件嵌套在<MenuItem>组件中。
所以这可能就是你想要的。

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

赞(0）回复(0）举报 2022-10-21

yacmzcpb6#

看看下面的代码Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object是否解决了这个问题：

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

赞(0）回复(0）举报 2022-10-21

quhf5bfb7#

我认为其他答案实际上是落后的，这打乱了MenuItem的正常布局。(对我来说，菜单项变高了，文字太低了。)这样做效果要好得多，而且不需要自己尝试重新设计<a>标记的样式：

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

赞(0）回复(0）举报 2022-10-21

我来回答

如何使用物料界面菜单中的Next.js Link(Next/link)组件？

7条答案

相关问题

热门标签

最新问答