如何在 material-ui 1.0 中添加指向列表的链接？

Posted 2023-02-22

【中文标题】如何在 material-ui 1.0 中添加指向列表的链接？

【英文标题】：How to add a link to a List in material-ui 1.0?

【发布时间】：2018-04-22 17:31:07

【问题描述】：

以下与 onClick 动画混淆（ListItem 变为红色）：

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

在 ListItem 中添加链接时，仅在单击 ListItemText 时才使转换起作用，这不是我想要的。 添加链接的正确方法是什么？

【参考方案1】：

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

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

示例基于此部分：docs

【讨论】：

如果您需要依赖 Push-State URL，这是一个很好的解决方案。

这应该是对最新版Material UI有效的正确解决方案

如果我需要列表项的某些部分来路由但不是全部怎么办？在我的场景中，我有一些我希望可以点击的文本，然后是一个 exand chevron 以查看该文本下方的部分

太棒了！允许我使用 Next.js 的链接组件

我不太明白这是怎么回事；如果我将 Link 添加为组件属性，这在技术上意味着什么？

【参考方案2】：

实现此目的的最简单方法是使用 component 属性将 ListItem 设为链接：

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

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

component 属性的行为记录在 here 中。请注意，href prop 将自动传递给锚标记，如 props 文档中的最后一行所指定：

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

【讨论】：

ListItem 与 component="a" 和 href 非常适合外部链接。对于内部链接，最好使用带有to 属性的component=Link。

扩展@BennyNeugebauer 回答如果使用href，它将重新加载页面，因此不应将其用于某些内部路由。

【参考方案3】：

我也遇到过同样的问题，但是由于这个问题，materialUI 中的新更新可能不起作用，作为 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>

Render Link in material ui Drawer

【参考方案4】：

对于Next.js 的使用，这对我有用：

import Link from "next/link";

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

【参考方案5】：

import React,  forwardRef  from "react";
// material-ui components
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
// react-router
import  Link as RouterLink  from "react-router-dom";
const ListItemLink = (props) => 
  const  icon, primary, to  = props;

  const renderLink = React.useMemo(
    () =>
      forwardRef((itemProps, ref) => (
        <RouterLink to=to ref=ref ...itemProps />
      )),
    [to]
  );

  return (
    <>
      <ListItem button component=renderLink>
        icon ? <ListItemIcon>icon</ListItemIcon> : null
        <ListItemText primary=primary />
      </ListItem>
    </>
  );
;

export default ListItemLink;

它实际上在文档中可用。