title: Material UI v1+ how to use a MenuItem with component={Link}
body: <p>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. </p>
  
  <p>In this <a href="https://stackoverflow.com/questions/32106513/material-ui-menu-using-routes?answertab=active#tab-top">post</a> a solution is proposed as sth like this: </p>
  
  <pre><code>      &lt;MenuItem className={classes.menuItem}
          component={&lt;Link to="/edit" /&gt;}
          disabled={!props.canEdit}
          onClick={() =&gt; props.handleCardAction('EDIT')}
        &gt;
  </code></pre>
  
  <p>But I couldnT quite get it right. </p>
  
  <p>How can I use a Link component inside the MenuItem?</p>
  
  <p>EDIT:</p>
  
  <p>Wrapping the <code>MenuItem</code> inside the <code>Link</code> works, but it looks ugly: <a href="https://forums.meteor.com/t/active-link-on-sidebar-with-react-router-material-ui-drawer/26650" rel="nofollow noreferrer">ref</a></p>
  
  <pre><code>&lt;Link to="/edit"&gt;
          &lt;MenuItem className={classes.menuItem}
            disabled={!props.canEdit}
            onClick={() =&gt; props.handleCardAction('EDIT')}
          &gt;
            &lt;ListItemIcon className={classes.icon}&gt;
              &lt;EditIcon /&gt;
            &lt;/ListItemIcon&gt;
            &lt;ListItemText classes={{ primary: classes.primary }} inset primary="Edit" /&gt;
          &lt;/MenuItem&gt;
        &lt;/Link&gt;
  </code></pre>