使用路径的材质UI菜单

Question

我正在玩物质ui.我使用路由实现了LeftNav,但我找不到获取IconMenu的方法,或者菜单使用链接或路由.任何人都可以指点我一个好的来源/教程？文档不足,两个组件似乎都不像LeftNav那样支持'menuItems'作为属性.

Answer 1

2016年12月编辑:在linkButton道具被弃用,你会得到一个警告:

Warning: Unknown props `linkButton` on <a> tag.

所以简单地删除道具:

<MenuItem
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

这是一个示例回购,以及现场演示.

原始答案:

只是想指出,如果你使用的是react-router,你可能想要使用<Link to="/some/page" />而不是<a>标签.

要做到这一点,你需要使用containerElement道具

<MenuItem
  linkButton
  containerElement={<Link to="/profile" />}
  primaryText="Profile"
  leftIcon={
    <FontIcon className="material-icons">people</FontIcon>
  }
/>

(={true}如果你只是通过true,可以省略,换句话说,<MenuItem linkButton />是相同的<MenuItem linkButton={true} />)

该containerElement和linkButton道具其实是记录在按键部分,但你可以用它MenuItem为好.

Answer 2

您可以设置linkButttonprop MenuItem以生成链接,然后还添加href.

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />

Answer 3

从Material-UI 1.0开始，新语法为：

<MenuItem
  component={Link}
  // the 'to' prop (and any other props not recognized by MenuItem itself)
  // will be passed down to the Link component
  to="/profile"
>
  Profile
</MenuItem>

（注意：此示例不包含图标。为此提供了一个新ListItemIcon组件。）

Answer 4

截至 2020 年 9 月，唯一有效且超级简单的是

<MenuItem component="a" href="/your-path">Click Me</MenuItem>

奖励：要添加带有徽章的图标：

<MenuItem component="a" href="/your-path">
        <IconButton color="inherit" href="/your-path">
              <Badge badgeContent="12" color="secondary">
                <StarsSharpIcon color="action"/>
              </Badge>
        </IconButton>
Click Me
</MenuItem>

Answer 5

支柱linkButton已EnhancedButton被弃用.href提供属性时不再需要LinkBut​​ton .它将在v0.16.0中删除.

<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

工作良好

Answer 6

现有答案（2018 年 9 月）都不适用于 react 16.4.2 和 react-router 4.2.2，所以这是我的解决方案：

<Link to='/notifications' style={{ textDecoration: 'none' }}>
   <MenuItem>Notifications</MenuItem>
</Link>

如您所见，MenuItem 组件被 Link 组件包围，并且我添加了一个样式textDecoration: 'none'，使该项目不带有下划线。

Answer 7

2023年答案：

import {Menu, MenuItem, Link} from '@mui/material'

<Menu>
  <MenuItem component={Link} href='/'>Home</MenuItem>
  <MenuItem component={Link} href='/settings/user'>My Settings</MenuItem>
<Menu />

截至 2023 年撰写时，上述许多答案已被弃用，并使用 MUI v5.11.6 进行了测试。

传入 aLink作为componenta 的 prop MenuItem，使用 aLink作为该的根元素MenuItem。有关可以使用元素执行的其他操作的文档可以在此处Link找到

Answer 8

使用 M-UI 4.x，您可以component在 和 上设置一个道具MenuItem，例如

<MenuItem component='a' href='link/to/some/page'>Sample Link</MenuItem>