<link>

Canary

Расширения React для <link> в настоящее время доступны только в каналах Canary и экспериментальных каналах React. В стабильных релизах React <link> работает только как встроенный браузерный HTML-компонент встроенный браузерный HTML-компонент. Узнайте больше о каналах выпуска React здесь.

Встроенный браузерный компонент <link> позволяет использовать внешние ресурсы, такие как таблицы стилей, или добавлять в документ метаданные ссылок.

<link rel="icon" href="favicon.ico" />

Справочник
- <link>
Использование

Справочник

`<link>`

Для ссылки на внешние ресурсы, такие как таблицы стилей, шрифты и значки, или для добавления в документ метаданных ссылок, используйте встроенный браузерный компонент <link>. Вы можете отобразить <link> из любого компонента, и React в большинстве случаев разместит соответствующий элемент DOM в заголовке документа.

<link rel="icon" href="favicon.ico" />

Дополнительные примеры ниже.

Свойства

<link> поддерживает все общие свойства элементов.

rel: строка, обязательна. Указывает связь с ресурсом. React обрабатывает ссылки с rel="stylesheet" по-другому, чем другие ссылки.

Эти свойства применяются, когда rel="stylesheet":

precedence: строка. Указывает React, как расположить элемент DOM <link> относительно других элементов в документе <head>, что определяет, какая таблица стилей может переопределить другую. React будет предполагать, что значения приоритета, которые он обнаруживает первыми, являются «ниже», а значения приоритета, которые он обнаруживает позже, являются «выше». Многие системы стилей могут работать нормально с одним значением приоритета, так как правила стилей являются атомарными. Таблицы стилей с одинаковым приоритетом объединяются, независимо от того, являются ли они <link> или встроенными <style> тегами, или загружены с помощью функций preinit.
media: строка. Ограничивает таблицу стилей определённым правилом медиа-запросов.
title: строка. Указывает имя альтернативной таблицы стилей.

Эти свойства применяются, когда rel="stylesheet" но отключают специальную обработку таблиц стилей React специальную обработку таблиц стилей:

disabled: булево значение. Отключает таблицу стилей.
onError: функция. Вызывается, когда таблица стилей не загружается.
onLoad: функция. Вызывается, когда таблица стилей загружается.

Эти свойства применяются, когда rel="preload" или rel="modulepreload":

as: строка. Тип ресурса. Возможные значения: audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
imageSrcSet: строка. Применимо только при as="image". Указывает набор источников изображения.
imageSizes: строка. Применимо только при as="image". Указывает размеры изображения.

Эти свойства применяются, когда rel="icon" или rel="apple-touch-icon":

sizes: строка. размеры значка.

Эти свойства применяются во всех случаях:

href: строка. URL связанного ресурса.
crossOrigin: строка. Политика CORS для использования. Возможные значения: anonymous и use-credentials. Требуется, когда as установлено в "fetch".
referrerPolicy: строка. Заголовок Referrer для отправки при загрузке. Возможные значения: no-referrer-when-downgrade (по умолчанию), no-referrer, origin, origin-when-cross-origin, и unsafe-url.
fetchPriority: строка. Предлагает относительный приоритет для загрузки ресурса. Возможные значения: auto (по умолчанию), high, и low.
hrefLang: строка. Язык связанного ресурса.
integrity: строка. Криптографический хэш ресурса для проверки его подлинности.
type: строка. MIME-тип связанного ресурса.

Свойства, которые не рекомендуется использовать с React:

blocking: строка. Если установлено значение "render", заставляет браузер не отображать страницу до загрузки таблицы стилей. React предоставляет более тонкую настройку с помощью Suspense.

Особенности рендеринга

React всегда помещает элемент DOM, соответствующий компоненту <link> в <head> документа, независимо от того, где он отображается в дереве React. <head> — единственное допустимое место для <link> в DOM, но это удобно и сохраняет композиционную структуру, если компонент, представляющий определённую страницу, может отображать компоненты <link>.

Существуют некоторые исключения из этого правила:

Если у <link> есть свойство rel="stylesheet", то он должен также иметь свойство precedence, чтобы получить эту специальную обработку. Это связано с тем, что порядок таблиц стилей в документе важен, поэтому React должен знать, как расположить эту таблицу относительно других, что вы указываете с помощью свойства precedence. Если свойство precedence опущено, специальная обработка не применяется.
Если у <link> есть свойство itemProp, специальная обработка не применяется, поскольку в этом случае это не относится к документу, а представляет метаданные о конкретной части страницы.
Если у <link> есть свойства onLoad или onError, поскольку в этом случае вы управляете загрузкой связанного ресурса вручную в своем компоненте React.

Особенности обработки таблиц стилей

Кроме того, если <link> относится к таблице стилей (т.е. в его свойствах есть rel="stylesheet"), React обрабатывает его следующим образом:

Компонент, отображающий <link> будет приостановлен во время загрузки таблицы стилей.
Если несколько компонентов отображают ссылки на одну и ту же таблицу стилей, React объединит их и поместит в DOM только одну ссылку. Две ссылки считаются одинаковыми, если у них одинаковое свойство href.

Существуют два исключения из этой специальной обработки:

Если у ссылки нет свойства precedence , специальная обработка не применяется, потому что порядок таблиц стилей в документе важен, поэтому React должен знать, как расположить эту таблицу относительно других, что вы указываете с помощью свойства precedence.
Если вы предоставляете свойства onLoad, onError, или disabled, специальная обработка не применяется, поскольку эти свойства указывают, что вы управляете загрузкой таблицы стилей вручную внутри вашего компонента.

Эта специальная обработка имеет два нюанса:

React игнорирует изменения свойств после отображения ссылки. (В режиме разработки React выведет предупреждение, если это произойдёт.)
React может оставить ссылку в DOM даже после того, как компонент, который её отобразил, был удалён.

Использование

Вы можете добавить в документ ссылки на связанные ресурсы, такие как значок, канонический URL или pingback. React разместит эти метаданные в <head> документа, независимо от места их размещения в дереве React.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function BlogPage() {
  return (
    <ShowRenderedHTML>
      <link rel="icon" href="favicon.ico" />
      <link rel="pingback" href="http://www.example.com/xmlrpc.php" />
      <h1>My Blog</h1>
      <p>...</p>
    </ShowRenderedHTML>
  );
}

Связывание с таблицей стилей

Если компонент зависит от определённой таблицы стилей для правильного отображения, вы можете отобразить ссылку на эту таблицу стилей внутри компонента. Ваш компонент будет приостановлен во время загрузки таблицы стилей. Вы должны указать свойство precedence , которое указывает React, где разместить эту таблицу стилей относительно других — таблицы стилей с более высоким приоритетом могут переопределить таблицы с более низким приоритетом.

Примечание

При использовании таблицы стилей, может быть полезно вызвать функцию preinit. Вызов этой функции может позволить браузеру начать загрузку таблицы стилей раньше, чем если бы вы просто рендерили компонент <link>, например, отправив ответ HTTP Early Hints.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
  return (
    <ShowRenderedHTML>
      <link rel="stylesheet" href="sitemap.css" precedence="medium" />
      <p>...</p>
    </ShowRenderedHTML>
  );
}

Управление приоритетом таблиц стилей

Таблицы стилей могут конфликтовать друг с другом, и в этом случае браузер использует таблицу, которая находится позже в документе. React позволяет управлять порядком таблиц стилей с помощью свойства precedence. В этом примере два компонента рендерят таблицы стилей, и таблица с более высоким приоритетом расположена позже в документе, даже если компонент, который её рендерит, расположен раньше.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HomePage() {
  return (
    <ShowRenderedHTML>
      <FirstComponent />
      <SecondComponent />
      ...
    </ShowRenderedHTML>
  );
}

function FirstComponent() {
  return <link rel="stylesheet" href="first.css" precedence="high" />;
}

function SecondComponent() {
  return <link rel="stylesheet" href="second.css" precedence="low" />;
}

Уникализация рендеринга таблиц стилей

Если вы рендерите одну и ту же таблицу стилей из нескольких компонентов, React поместит в заголовок документа только одну <link>.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HomePage() {
  return (
    <ShowRenderedHTML>
      <Component />
      <Component />
      ...
    </ShowRenderedHTML>
  );
}

function Component() {
  return <link rel="stylesheet" href="styles.css" precedence="medium" />;
}

Аннотирование определённых элементов в документе ссылками

Вы можете использовать компонент <link> со свойством itemProp для аннотирования определённых элементов в документе ссылками на связанные ресурсы. В этом случае React не поместит эти аннотации в документ <head> , а разместит их как любой другой компонент React.

<section itemScope>
  <h3>Annotating specific items</h3>
  <link itemProp="author" href="http://example.com/" />
  <p>...</p>
</section>

© 2013–present Facebook Inc.
Licensed under the Creative Commons Attribution 4.0 International Public License.
https://18.react.dev/reference/react-dom/components/link

<link> - Эта функция доступна в последней версии Canary

Canary

Справочник

<link>

Свойства

Особенности рендеринга

Особенности обработки таблиц стилей

Использование

Связывание с связанными ресурсами

Связывание с таблицей стилей

Примечание

Управление приоритетом таблиц стилей

Уникализация рендеринга таблиц стилей

Аннотирование определённых элементов в документе ссылками

<link>

`<link>`