链接

链接组件允许您使用主题颜色和排版样式轻松自定义锚元素。

基本链接

链接组件构建于 Typography 组件之上，这意味着您可以使用它的 props。

但是，链接组件与 Typography 组件相比，有一些不同的默认 props

• color="primary" 因为链接需要突出显示。
• variant="inherit" 因为链接通常会用作 Typography 组件的子组件。

下划线

underline prop 可以用来设置下划线行为。默认值是 always。

安全性

当您将 target="_blank" 与链接一起使用时，建议在链接到第三方内容时始终设置 rel="noopener" 或 rel="noreferrer"。

• rel="noopener" 阻止新页面访问 window.opener 属性，并确保它在单独的进程中运行。如果没有这个，目标页面可能会将您的页面重定向到恶意 URL。
• rel="noreferrer" 具有相同的效果，但也阻止将 Referer 标头发送到新页面。⚠️ 删除 referrer 标头会影响分析。

第三方路由库

一个常见的用例是在客户端执行导航，而无需 HTTP 往返服务器。链接组件提供了 component prop 来处理此用例。这是一个 更详细的指南。

可访问性

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/link/)

• 当为链接提供内容时，请避免使用通用的描述，如“点击这里”或“前往”。而是使用 具体的描述。
• 为了获得最佳用户体验，链接应该从页面上的文本中脱颖而出。例如，您可以保留默认的 underline="always" 行为。
• 如果链接没有有意义的 href，则应使用 <button> 元素渲染。下面的演示说明了如何正确地使用 <button> 链接

键盘可访问性

• 当用户按下 Tab 键时，交互元素应以连贯的顺序接收焦点。
• 用户应该能够通过按 Enter 键打开链接。

屏幕阅读器可访问性

• 当链接获得焦点时，屏幕阅读器应播报描述性的链接名称。如果链接在新窗口或浏览器标签页中打开，请添加 aria-label 以告知屏幕阅读器用户——例如，“要了解更多信息，请访问在新窗口中打开的“关于”页面。”

API

请参阅下面的文档，以获得此处提及的组件的所有可用 props 和 classes 的完整参考。

• <Link />