跳转到内容

🎉 Material UI v5 is out now! Check out the announcement blog post

Links 链接

您可以通过链接(Links)组件,轻松的使用主题颜色和字体铸排的样式来自定义锚定元素。

简单的链接

链接组件是基于 文字铸排(Typography) 组件而开发的。 您可以利用它的一些属性。

<Typography className={classes.root}>
  <Link href="#" onClick={preventDefault}>
    Link
  </Link>
  <Link href="#" onClick={preventDefault} color="inherit">
    {'color="inherit"'}
  </Link>
  <Link href="#" onClick={preventDefault} variant="body2">
    {'variant="body2"'}
  </Link>
</Typography>

然而,链接组件有一些不同于文字铸排组件的默认属性:

  • 当链接需要突出显示时,设置 color="primary"
  • 在多数的情况下,当链接需要作为文字铸排的子组件使用,则设置 variant="inherit"

安全性

当你将 target="_blank"和链接组件一起使用时,若想和第三方的内容相连,我们推荐始终配置 rel="noopener" 或者 rel="noreferrer"

  • rel="noopener" 会阻止新页面访问 window.opener 属性,并确保它在单独的进程运行。 若不如此,目标页面有极大可能将你的页面重定向至一个恶意网址。
  • rel ="noreferrer" 具有相同的效果,但也阻止将 Referer 页头发送到新的页面。 ⚠️ 去除 referrer header 会影响分析。

Third-party routing library(第三方路由库)

一种常见的用例是仅在客户端上执行导航,而无需通过 HTTP 往返服务器。 Link 组件提供了一个属性来处理这样的情况:那就是component

这有一个与 react-router 交互的例子

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#link)

  • 当提供链接对应的内容时,避免使用泛泛的描述,比如“点击这里”或“跳转”之类。 相反的,请使用 具体详细的描述说明。
  • 为了获得最佳的用户体验,链接应该从页面上的文字中脱颖而出。
  • 如果一个链接没有赋予一个有意义的 href 值,它应该加载成一个<按钮>元素
<Link
  component="button"
  variant="body2"
  onClick={() => {
    console.info("I'm a button.");
  }}
>
  Button Link
</Link>