将 react-route 链接集成到 Material UI 列表中 [英] Integrates react-route Links into Material UI list

问题描述

我正在尝试在侧边栏中创建一个

解决方案

您可以使用 Link 作为 ListItem 的组件，如下所示使用

<ListItem component={Link} to="/reports"><列表项图标><图标>条形图</图标></ListItemIcon><ListItemText primary="Reports"/></ListItem></列表>

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:

解决方案

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>

这篇关于将 react-route 链接集成到 Material UI 列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！