使用路由的材质 UI 菜单答案

【问题标题】：Material UI Menu using routes使用路由的材质 UI 菜单
【发布时间】：2015-11-13 09:40:24
【问题描述】：

我在玩material-ui。我使用路由实现了 LeftNav，但我找不到获取 IconMenu 或使用链接或路由的菜单的方法。任何人都可以指出一个好的来源/教程？文档不足，并且两个组件似乎都不像 LeftNav 那样支持“menuItems”作为属性。

【问题讨论】：

标签： reactjs material-design material-ui

【解决方案1】：

您可以在MenuItem 上设置linkButtton 属性以生成链接，然后还可以添加href。

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

【讨论】：

如果这是真的，那么不幸的是，它似乎不再是真的了。

【解决方案2】：

另一个迟来的更新：

不再支持containerElement prop，请改用component prop。

查看文档here。

2016 年 12 月编辑：linkButton 属性已弃用，您将收到警告：

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

所以只需移除道具：

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

Here's an Example Repo 和 the Live Demo Here。

原答案：

只是想指出，如果您使用的是 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 属性实际上记录在 in the buttons section 中，但您也可以在 MenuItem 中使用它。

【讨论】：

链接现已损坏，无法在网站的任何位置看到任何按钮链接文档。这可能是我所追求的，所以感谢发帖。我不知道你所说的真正的东西是什么意思？
已更新，感谢提醒！（也更新了真实的东西）
我还看到 onTouchTap 是一种通过与菜单项交互来获取事件的方法。
是的，但是使用onTouchTap/onClick而不是<a>/<Link />来触发页面更改，您会失去一些本机功能，例如浏览器中的链接预览，以及用户的能力在新标签页中打开链接。
这对我不起作用，请参阅github.com/callemall/material-ui/issues/…

【解决方案3】：

这是我的实现，和material-ui官网上的一模一样。您可以使用的组件包括AppBar、Drawer 和ListItem。 SelectableList 可以实现为let SelectableList = MakeSelectable(List)。

<div>
  <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
  />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>

【讨论】：

【解决方案4】：

EnhancedButton 的属性 linkButton 已弃用。当提供 href 属性时，不再需要 LinkButton。它将在 v0.16.0 中删除。

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

工作正常

【讨论】：

这是截至 2016 年 11 月 29 日的最佳答案，您还可以使用 target="_blank" 之类的东西来获取在新浏览器窗口中打开的链接
这是一个选项，但它会重新加载整个页面，而 Link 的元素不会。可以改为简单地包装 MenuItem: <Link to='/'><MenuItem>Home</MenuItem></Link>

【解决方案5】：

我无法使用react-router 使containerElement 在iOS 中的Safari 上运行。我正在使用 Material UI 的 0.17.2 和 react-router@v3，这是一个对我有用的解决方法：

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />

【讨论】：

在没有任何解释的情况下对答案投反对票是没有帮助的。

【解决方案6】：

onTouchTap 对我不起作用，我必须使用 onClick，请参阅下面的示例

  <MenuItem 
    onClick={this.logout}
    containerElement={<Link to="/" />}
    primaryText="Sign out"
    rightIcon={
      <b style={style.rightIcon}>
        <img
          className="menu-img"
          src="img/app/logout.png"
          alt="logout"
        />
      </b>
    }
  />

希望这对其他人也有帮助

【讨论】：

【解决方案7】：

从 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 组件。）

【讨论】：

完美...如我所愿。
这也适用于 Material UI 中的ListItem。

【解决方案8】：

现有的答案（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' 以不让项目下划线。

【讨论】：

我也必须添加outline: "none"。
谢谢。令人惊讶的是，material-ui.com/components/menus 缺少这样的基本信息

【解决方案9】：

在自己做了一些搜索之后，我选择了一个稍微不同的解决方案：

<MenuItem onClick={() => {handleClose("/#about")}}>About me</MenuItem>

带有配套的JS功能：

function handleClose(nav) {
    window.location.href = nav;
}

希望证明可以用作替代品。

【讨论】：

【解决方案10】：

您可以使用 react-route-dom 和 MenuItem onClick 属性首先导入 react-router-dom： import { useHistory } from 'react-router-dom' 然后声明一个函数来处理您的组件中的 onClick：const navigate = () => history.push('route/to/navigate')，然后使用您的 MenuItem <MenuItem onClick={navigate}>Navigate</MenuItem>

【讨论】：

【解决方案11】：

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

【讨论】：

它有效，但您应该知道使用a 会导致页面重新加载。

【解决方案12】：

使用 M-UI 4.x，您可以在 MenuItem 上设置一个 component 属性以及类似的东西

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

【讨论】：

它有效，但您应该知道使用a 会导致页面重新加载。
a 导致页面重新加载的含义是什么？
@jkschin react 通常用于单页应用程序方式 (SPA)，其中一个好处是避免整个页面重新加载。

【解决方案13】：

import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { Link } from 'react-router-dom';


<MenuItem component={Link} to='/login'>
       Login
</MenuItem>

这对我有用，2021 年 9 月，使用 React Router 和 MenuItem 的 Link 属性。

【讨论】：

【解决方案14】：

来自v5.2.2，您可以使用：

import { MenuItem } from '@mui/material';
import { Link } from 'react-router-dom';

<MenuItem component={Link} to="/profile">
  Profile
</MenuItem>

【讨论】：