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>

score 5 · Accepted Answer · answered Jul 08 '18 at 21:51

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>

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

1 Answers1