如何在material-ui 1.0中添加一个List的链接？

Question

使用onClick动画进行以下混乱(ListItem变为红色):

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

在ListItem中添加链接时,只有单击ListItemText才能使转换工作,这不是我想要的.添加链接的正确方法是什么？

Answer 1

与"react-router-dom"一起使用

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

该示例基于此部分:docs

如果您需要依赖推送状态 URL，这是一个很好的解决方案。 (3认同)
这应该是对 Material UI 最新版本有效的正确解决方案 (2认同)
对于 Material UI 4.11.0，这个解决方案不起作用，至少对我来说是这样。获取“属性“组件”在类型“IntrinsicAttributes”上不存在&{button：true;}&{alignItems？：“center”|“flex-start”|未定义;autoFocus？：布尔值|未定义;按钮？：布尔值|未定义; ... 7 个以上 ...; 已选择？: boolean | undefined; } & { ...; } & CommonProps<...> & Pick<...>'" (2认同)

Answer 2

完成此任务的最简单方法是ListItem使用componentprop 创建一个链接:

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

这样,ListItem将是一个链接到所需位置的锚标记,但仍然会收到适当的样式,以便不会有任何视觉变化.

此处component记录了道具的行为.请注意,prop将自动传递给锚标记,如props文档中的最后一行所指定:href

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

带有 `component="a"` 和 `href` 的 `ListItem` 非常适合外部链接。对于内部链接，最好使用带有“to”属性的“component={Link}”。 (4认同)