Integrates react-route Links into Material UI list

Question

Im trying to create a list of links in a sidebar. The problems is that if I use

<ListItem button component='a' href="/persons">

The page reloads instead of going to the url like a Link component would do.

<Link to='/persons' >

I wonder, how can I replace the Material UI listItem href behaviour with the react-router Link behaviour? This is the list im trying to fix:

// this breaks the design
<Link to='/persons' >
    <ListItem button>
        <ListItemIcon>
            <Icon>people</Icon>
        </ListItemIcon>
        <ListItemText primary="Personas" />
    </ListItem>
</Link>

// this reloads the page, i want to avoid
<ListItem button component='a' href="/persons">
    <ListItemIcon>
        <Icon>bar_chart</Icon>
    </ListItemIcon>
    <ListItemText primary="Reports" />
</ListItem>

This is how the link looks:

Answer 1

You can use Link as the component of the ListItem and use it as the following

<List>
  <ListItem component={Link} to="/reports">
    <ListItemIcon>
      <Icon>bar_chart</Icon>
    </ListItemIcon>
    <ListItemText primary="Reports" />
  </ListItem>
</List>