将 react-route 链接集成到 Material UI 列表中

IT技术 javascript reactjs react-router
2021-05-01 09:39:35

我正在尝试在侧边栏中创建链接列表。问题是，如果我使用

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

页面会重新加载，而不是像Link组件那样转到 url 。

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

这是链接的外观：

在此处输入图片说明

2个回答

您可以将其Link用作 的组件ListItem并将其用作以下内容

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

对于<ListItem />该component支柱可以是string（对于DOM元素）或react component本身。

https://material-ui.com/api/list-item/

您可以定义任何组件

const ListItemComponent  =  () => {
  return <Link to="/test">Check</Link>
}

将其作为componentprops传递给<ListItem />.

        <List>
          <ListItem component={ListItemComponent}>
          </ListItem>
        </List>

试试这个👉 https://stackblitz.com/edit/react-ogpmxx

其它你可能感兴趣的问题
上一篇在 next.js 中获取客户端的当前 url 下一篇@material-ui 和 @mui 有什么区别