使用路由的材质 UI 菜单

Posted 2023-02-22

【中文标题】使用路由的材质 UI 菜单

【英文标题】：Material UI Menu using routes

【发布时间】：2015-11-13 09:40:24

【问题描述】：

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

【参考方案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 属性时，不再需要 LinkBut​​ton。 它将在 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"
          
        />
      </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>