Перейти к контенту

Ссылки

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

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

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

<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.

<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)

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