Link
Link 组件允许您使用主题颜色和排版样式自定义锚标记。
简介
Joy UI Link 组件替换了原生 HTML <a> 元素，并接受与 Typography 组件相同的 props，以及 MUI System props。
<Link />示例
基础
import Link from '@mui/joy/Link';
Joy UI Link 的行为类似于原生 HTML <a>，因此默认情况下会渲染下划线，并且在悬停时没有背景颜色。
下面的演示展示了 Link 的两个基本状态：默认和禁用。不要忘记始终分配 href 值
级别
Link 组件带有所有 Typography 级别可供选择。
颜色
主题中包含的每个调色板都可通过 color 属性使用。尝试将不同的颜色与不同的变体组合使用。
下划线
使用 underline 属性来控制 Link 组件上的下划线行为。它带有三个值：hover、always 和 none。
禁用
使用 disabled 属性来禁用交互和焦点
Overlay 属性
使用 overlay 属性使整个组件可作为链接点击。下面的演示展示了如何将其与 Card 组件一起使用，以确保适当的可访问性。
作为按钮
要将 Link 组件用作按钮，请将 button 值分配给 component 属性。这在两种情况下可能很有用
- 链接没有有意义的 href。
- 设计看起来更像按钮而不是链接。
<Link
component="button"
onClick={() => {
// ...process something
}}
>
Do something
</Link>
与 Typography 组件一起使用
Link 组件可以作为 Typography 组件的子组件使用。在这种情况下，Link 将继承其 Typography 父组件的排版级别比例，除非您在 Link 本身上为 level 属性指定一个值。
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Magna Aliqua。Maecenas sed enim ut sem viverra aliquet eget。
第三方路由库
以下部分解释了如何将 Link 组件与具有自己可比组件的第三方工具集成。
Next.js Pages 路由
这是一个使用 Next.js 的 Link 组件 的示例
import NextLink from 'next/link';
import Link from '@mui/joy/Link';
<NextLink href="/docs" passHref>
<Link>Read doc</Link>
</NextLink>;
React Router
这是一个使用 React Router 的 Link 组件 的演示。
import { Link as RouterLink } from 'react-router';
import Link from '@mui/joy/Link';
<Link component={RouterLink} to="/docs">
Read doc
</Link>;
安全性
当将 target="_blank" 与指向另一个站点页面的链接一起使用时，Google Chrome 开发者文档建议添加 rel="noopener" 或 rel="noreferrer" 以避免潜在的安全问题。
rel="noopener"阻止新页面访问window.opener属性，并确保它在单独的进程中运行。如果没有这个，目标页面可能会将您的页面重定向到恶意 URL。rel="noreferrer"具有相同的效果，但也阻止将 Referer 标头发送到新页面。请注意，删除 referrer 标头会影响分析。
可访问性
以下是一些基于 WAI-ARIA 创作实践，确保链接组件可访问的技巧。
- 文案： 避免使用通用词语作为行动号召，例如“点击这里”或“前往”。相反，使用描述性文本来告知用户点击链接后会发现什么。
- 设计： 为了获得良好的用户体验，链接应该在页面上的文本中脱颖而出。保持默认的
underline="always"行为是一个安全的选择。 - Href： 如果链接没有有意义的 href，则应使用
<button>元素渲染。
常用示例
展示如何使用 Link 组件和其他组件作为装饰器来组合设计的示例。