将反应路由链接集成到 Material UI 列表中

2024-02-07

我正在尝试创建一个链接列表 https://material-ui.com/components/lists/在侧边栏中。问题是如果我使用

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

页面会重新加载,而不是像Link https://reacttraining.com/react-router/web/api/Link组件就可以了。

<Link to='/persons' >

我想知道如何用react-router Link 行为替换Material UI listItem href 行为?这是我试图修复的列表:

// 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>

链接如下所示:


您可以使用Link作为的组成部分ListItem并将其用作以下内容

<List>
  <ListItem component={Link} to="/reports">
    <ListItemIcon>
      <Icon>bar_chart</Icon>
    </ListItemIcon>
    <ListItemText primary="Reports" />
  </ListItem>
</List>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将反应路由链接集成到 Material UI 列表中 的相关文章

随机推荐