Material UI v1+ 如何使用带有 component={Link} 的 MenuItem答案

【问题标题】：Material UI v1+ how to use a MenuItem with component={Link}Material UI v1+ 如何使用带有 component={Link} 的 MenuItem
【发布时间】：2018-12-16 13:51:49
【问题描述】：

我正在从 Material UI v0.20 迁移到 v1.2.3+，但我找不到将链接放入 MenuItem 的方法。

在这个post 中提出了一个解决方案，如下所示：

      <MenuItem className={classes.menuItem}
        component={<Link to="/edit" />}
        disabled={!props.canEdit}
        onClick={() => props.handleCardAction('EDIT')}
      >

但我不能完全正确。

如何在 MenuItem 中使用 Link 组件？

编辑：

将MenuItem 包裹在Link 中可行，但看起来很难看：ref

<Link to="/edit">
        <MenuItem className={classes.menuItem}
          disabled={!props.canEdit}
          onClick={() => props.handleCardAction('EDIT')}
        >
          <ListItemIcon className={classes.icon}>
            <EditIcon />
          </ListItemIcon>
          <ListItemText classes={{ primary: classes.primary }} inset primary="Edit" />
        </MenuItem>
      </Link>

【问题讨论】：

标签： material-ui

【解决方案1】：

你很亲密，预期的方式是这样的：

<MenuItem
    component={Link}
    to="/edit"
    className={classes.menuItem}
    disabled={!props.canEdit}
    onClick={() => props.handleCardAction('EDIT')}
>
    Bla
</MenuItem>

this answer 中的更多信息。

【讨论】：

【解决方案2】：

对于 next.js 链接，我是这样决定的：

<Link href={href}>
 <MenuItem
    component="span" // make as span
  >
      ...
  </MuiMenuItem>
</Link>

【讨论】：