Material UI 菜单使用路由

Question

Material UI 菜单使用路由

43

我正在使用material-ui。我使用routes实现了LeftNav，但是我找不到一种方法来使IconMenu或者Menu与链接或路由一起工作。有人可以指点我一个好的资源/教程吗？文档不够详细，而且这两个组件似乎都不支持像LeftNav那样的'menuItems'属性。

- gattermeier

19个回答

45

从 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组件可以使用。）

- Matt Browne

完美...正是我所需要的。 - prem30488

这也适用于 Material UI 的 ListItem。 - piotros

1

在我的情况下，顶部答案无法正常工作，但是v5版本可以。 - dading84

不喜欢隐式传递属性，而且它也无法与 TypeScript 兼容。最好的方法是这样做：component={()=><Link to='/profile'/>} - ICW

也许我做错了什么，但是 const menuItems: MenuItemProps[] = [{id: 'someId', children: 'Go', component={Link}}] 并且看到错误 -

Type '{ id: string; onClick: () => void; children: string; component: string; }' is not assignable to type 'MenuItemProps<"li", {}>'.   Object literal may only specify known properties, and 'component' does not exist in type 'MenuItemProps<"li", {}>'.

. 它有什么问题？ - lazy.lizard

13

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

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

- Hai Nguyen

8

如果这是真的，可惜现在似乎不再是真的了。 - user1175849

11

在现有答案中（截至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' 以使该项目不带有下划线。

- Simon

1

我还必须添加 outline: "none"。 - CorayThan

6

谢谢。令人惊奇的是 https://material-ui.com/components/menus/ 中缺少如此基础的信息。 - Igor K

1

这个可以工作，但是把 li 放在 a 里面，在语义上没有意义。 - DanV

9

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

- Kal

它可以工作，但你应该知道使用 a 会导致页面重新加载。 - piotros

7

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

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

运行正常

- Shashwat

截至2016年11月29日，这是最佳答案。您还可以使用target="_blank"等内容来在新的浏览器窗口中打开链接。 - Chris Sprance

这是一种选项，但它会重新加载整个页面，而 Link 的元素不会。相反，可以简单地将 MenuItem 包装起来：<Link to='/'><MenuItem>主页</MenuItem></Link> - keepthepeach

5

使用 M-UI 4.x，您可以在 MenuItem 上设置一个名为 component 的属性，并将其设置为某些内容。

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

- Maxime Brehin

3

它可以工作，但你应该注意使用 a 会导致页面重新加载。 - piotros

a 导致页面重新加载的含义是什么？ - jkschin

@jkschin React通常以单页应用程序（SPA）的方式使用，其中一个好处是避免完整页面重新加载。 - William

4

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中进行了测试。

将Link作为MenuItem的component属性传递，将使用Link作为该MenuItem的根元素。有关您可以使用Link元素执行的其他操作的文档可以在此处找到：这里。

- Matt Davis

1

干杯！这个最好，尽管其他一些解决方案也可以工作。它不添加任何额外的样式。 - Tajs

3

从 v5.2.2 版本开始，您可以使用以下内容：

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

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

- Petr K.

3

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的链接属性非常有效。

- Dorian N

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DaxChen · Accepted Answer

又是一个早该更新的内容：

containerElement 属性不再被支持，改用 component 属性。

在这里查看文档。

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

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

因此，只需删除该属性：

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

这里是示例仓库，以及此处的演示。

Translated answer:

我想指出，如果你正在使用 react-router，你可能需要使用 <Link to="/some/page" /> 而不是 <a> 标签。

为了实现这一点，你需要使用 containerElement 属性。

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

如果您只传递true，也就是说，<MenuItem linkButton />和<MenuItem linkButton={true} />是一样的，因此可以省略={true}。

containerElement 和 linkButton 属性实际上在按钮部分有文档记录，但是您也可以在MenuItem中使用它们。