<link>

Компонент встроенного браузера <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, где расположить <link> узел DOM относительно других в документе <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://react.dev/reference/react-dom/components/link

<link>

Ссылка

<link>

Свойства

Особое поведение рендеринга

Особое поведение для таблиц стилей

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

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

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

Примечание

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

Объединение стилей

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

`<link>`