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

Question

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

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

这是链接的样子：

Answer 1

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

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

Answer 2

对于 a <ListItem />propcomponent可以是 a string（对于 dom 元素）或 areact component本身。

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

您可以定义任何组件

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

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

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

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