Material UI 使用路线的菜单

Question

我在玩material-ui。我使用路线实现了 LeftNav，但我找不到获取 IconMenu 或使用链接或路线的菜单的方法。任何人都可以指出一个好的来源/教程吗？该文档不足，并且两个组件似乎都不支持 'menuItems' 和属性一样，而 LeftNav 确实如此。

Answer 1

您可以在 MenuItem 上设置 linkButtton 属性以生成 link，然后再添加一个 href。

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

Answer 2

另一个迟来的更新：

不再支持

containerElement 道具，请改用 component 道具。

查看文档 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, and 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 中使用它。

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

Answer 4

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

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

工作正常

Answer 5

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

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

Answer 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>
    }
  />

希望这对其他人也有帮助

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

Answer 8

None 的现有答案（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 9

自己做了一些搜索后，我采用了一个稍微不同的解决方案：

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

附带JS功能：

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

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

Answer 10

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

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

Answer 12

使用 M-UI 4.x 你可以在 MenuItem 上设置一个 component prop 和

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

Answer 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 道具。

Answer 14

从 v5.2.2 开始，您可以使用：

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

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

Answer 15

这对我适用于 v5

用于外部链接

<MenuItem
    component={"a"}
    href={"https://example.com"}
>Go here</MenuItem>

或内部链接

import { MenuItem } from "@mui/material";
import { Link } from "react-router-dom";
<MenuItem
    component={Link}
    to={"/users/2323"}
>Go here</MenuItem>

Answer 16

我们应该在 <MenuItem> 标签之外使用 <Link> 标签

错误：

     <MenuItem>
        <ListItemText>
            <Link to='/ticket-blotter' style={{ textDecoration: 'none' }}>
                TICKET BLOTTER 
            </Link>
        </ListItemText>
     </MenuItem>

解法：

        <Link to='/ticket-blotter' style={{ textDecoration: 'none' }}>
            <MenuItem>
                <ListItemText>
                    TICKET BLOTTER
                </ListItemText>
            </MenuItem>
        </Link>

Answer 17

你也可以这样试试

import { useHistory } from 'react-router-dom';

const YourComponentName = () =>{
  
    const history = useHistory();
    const handleRoutes = (path) =>{
       history.push(path)
    }
    
  return(
    <>
      ...
      <MenuItem onClick={()=>handleRoutes('/dashboard')}>Dashboard</MenuItem>
      <MenuItem onClick={()=>handleRoutes('/profile')}>Profile</MenuItem>
      ...
    </>
)
}

Material UI 使用路线的菜单

Material UI Menu using routes

reactjs

material-design

material-ui