Material UI v1+ how to use a MenuItem with component={Link}

Question

I m migrating from Material UI v0.20 to v1.2.3+ and I couldnT find a way to put a Link inside a MenuItem.

In this post a solution is proposed as sth like this:

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

But I couldnT quite get it right.

How can I use a Link component inside the MenuItem?

EDIT:

Wrapping the MenuItem inside the Link works, but it looks ugly: 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>

Answer 1

You were close, the intended way is this:

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

More information in this answer.

Answer 2

For next.js Link I decided this way:

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