Links 链接

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

简单的链接

链接（Links）组件是基于文字铸排（Typography）组件构建的，这意味着你也可以使用文字铸排组件的属性。

<Link href="#">Link</Link>
<Link href="#" color="inherit">
  {'color="inherit"'}
</Link>
<Link href="#" variant="body2">
  {'variant="body2"'}
</Link>

但是，链接组件与文字铸排组件相比，它们存在一些不同的默认属性：

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

下划线

underline 属性可以用来设置下划线行为。该属性的默认值是 hover。

underline="none"underline="hover"underline="always"

<Link href="#" underline="none">
  {'underline="none"'}
</Link>
<Link href="#" underline="hover">
  {'underline="hover"'}
</Link>
<Link href="#" underline="always">
  {'underline="always"'}
</Link>

安全性

当你将 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>

API

<React Link（链接）组件 />