Ссылки

Компонент Link позволяет легко кастомизировать анкерные элементы в соответствии с цветами и стилями типографики вашей темы.

Простые ссылки

The Link component is built on top of the Typography component. You can leverage its properties.

Link color="inherit"variant="body2"

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

However, the Link component has different default properties than the Typography component:

color="primary" as the link needs to stand out.
variant="inherit" as the link will, most of the time, be used as a child of a Typography component.

Underline

The underline prop can be used to set the underline behavior. The default is 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>

Безопасность

When you use target="_blank" with Links, it is recommended to always set rel="noopener" or rel="noreferrer" when linking to third party content.

rel="noopener" prevents the new page from being able to access the window.opener property and ensures it runs in a separate process. Without this, the target page can potentially redirect your page to a malicious URL.
rel="noreferrer" has the same effect, but also prevents the Referer header from being sent to the new page. ⚠️ Removing the referrer header will affect analytics.

Сторонняя библиотека маршрутизации

One common use case is to perform navigation on the client only, without an HTTP round-trip to the server. The Link component provides a property to handle this use case: component.

Here is an integration example with react-router.

Доступность

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

When providing the content for the link, avoid generic descriptions like "click here" or "go to". Instead, use specific descriptions.
For the best user experience, links should stand out from the text on the page.
If a link doesn't have a meaningful href, it should be rendered using a <button> element.

<Link
  component="button"
  variant="body2"
  onClick={() => {
    console.info("I'm a button.");
  }}
>
  Button Link
</Link>

API

<Link />