与“react-router-dom”一起使用

import { Link } from "react-router-dom";
<ListItem button component={Link} to="/design">

该示例基于本节：docs

完成此操作的最简单方法是ListItem使用componentprop创建链接：

<List>
  <ListItem button component="a" href="https://www.google.com">
    <ListItemText primary="Google" />
  </ListItem>
</List>

这样，ListItem将是链接到所需位置的锚标记，但仍会收到适当的样式，因此不会有任何视觉变化。

componentprops的行为记录在此处。请注意，hrefprop 将自动传递给锚标记，如 props 文档中的最后一行所指定：

提供的任何其他属性都将传播到根元素。

我遇到了同样的问题，但可能由于这个原因在 materialUI 中的新更新不起作用，有一些调整，如 import from import Link from '@material-ui/core/Link';

所以它会起作用

 import Link from '@material-ui/core/Link';

 <List>
  <ListItem button component={Link} href="/dsda">
    <ListItemIcon>
      <DashboardIcon />
    </ListItemIcon>
    <ListItemText primary="DashBoard"/>
  </ListItem>
 </List>

材质 ui 抽屉中的渲染链接

对于与Next.js一起使用，这对我有用：

import Link from "next/link";

<List>
    <Link href="/myUrl" passHref>
        <ListItem button component="a">
            My Link Text
        </ListItem>
    </Link>
</List>