title: how to have link router on. material ui list item, but not on one button in the list item
body: <p>have a component that contains some ListItem components (from material ui), and each ListItem has a button. The whole listitem should be clickable and route the app somewhere, except for that button, which onclick should execute an action.
  But right now, when I click the delete button, it will route the app to that path. I want to be able to delete the item (my delete method in the parent will actually open a dialog to confirm that, but I guess that is irrelevant). I just want it to ignore the route when clicking the icon.
  How do I handle this case?
  Here's the code:</p>
  <pre><code>&lt;ListItem
    component={Link}
    to={`item/${props.id}`}
    alignItems=&quot;flex-start&quot;
  &gt;
    &lt;ListItemAvatar&gt;
      &lt;Avatar /&gt;
    &lt;/ListItemAvatar&gt;
    &lt;ListItemText
      disableTypography={false}
      primary={props.b}
      secondary={props.c}
      className={classes.body}
    /&gt;
    &lt;IconButton
      onClick={props.deleteItem}
      aria-label=&quot;delete&quot;
      className={classes.button}
    &gt;
      &lt;DeleteIcon /&gt;
    &lt;/IconButton&gt;
  &lt;/ListItem&gt;
  </code></pre>