<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 всегда размещает соответствующий компоненту <link> элемент DOM в <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, где разместить эту таблицу стилей относительно других: таблицы с более высоким приоритетом могут переопределять таблицы с более низким приоритетом.

import ShowRenderedHTML from './ShowRenderedHTML.js';

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

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

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

import ShowRenderedHTML from './ShowRenderedHTML.js';

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

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

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

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

Обратите внимание: сами значения precedence произвольны, и их названия вы выбираете самостоятельно. React определяет, что обнаруженные первыми значения приоритета являются «низшими», а обнаруженные позже — «высшими».

Дедупликация при отображении таблиц стилей

Если несколько компонентов отображают одну и ту же таблицу стилей, 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>