我在玩材料用户界面。我使用路由实现了 LeftNav，但我找不到让 IconMenu 或 Menu 使用链接或路由的方法。任何人都可以向我指出一个好的来源/教程？文档不足，两个组件似乎都不像 LeftNav 那样支持“menuItems”作为属性。
使用路由的 Material UI 菜单
IT技术
reactjs
material-design
material-ui
2021-03-25 03:33:37
6个回答
另一个姗姗来迟的更新：
containerElement不再支持componentprop ，请改用prop。
在此处查看文档。
2016 年 12 月编辑：该linkButtonprops已弃用，您将收到警告：
Warning: Unknown props `linkButton` on <a> tag.
所以只需删除props：
<MenuItem
containerElement={<Link to="/profile" />}
primaryText="Profile"
leftIcon={
<FontIcon className="material-icons">people</FontIcon>
}
/>
原答案：
只是想指出，如果您使用的是 react-router，您可能想要使用<Link to="/some/page" />而不是<a>标签。
为此，您需要使用containerElementprops
<MenuItem
linkButton
containerElement={<Link to="/profile" />}
primaryText="Profile"
leftIcon={
<FontIcon className="material-icons">people</FontIcon>
}
/>
（={true}如果您只是通过true，则可以省略，换句话说，<MenuItem linkButton />与 相同<MenuItem linkButton={true} />）
该containerElement和linkButtonprops其实是记录在按键部分，但你可以用它MenuItem为好。
从 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组件。）
您可以将linkButttonprops设置为打开MenuItem以生成链接，然后还可以添加href.
<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />
现有答案（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'，使该项目不带有下划线。
该propslinkButton的EnhancedButton已被弃用。href提供该属性时不再需要 LinkButton 。它将随 v0.16.0 删除。
<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>
工作正常