<link>

組み込みブラウザの<link>コンポーネントを使用すると、スタイルシートなどの外部リソースを使用したり、リンクメタデータを使用してドキュメントに注釈を付けることができます。

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

リファレンス
- <link>
使用方法

リファレンス

`<link>`

スタイルシート、フォント、アイコンなどの外部リソースへのリンク、またはリンクメタデータを使用してドキュメントに注釈を付けるには、組み込みブラウザの<link>コンポーネントをレンダリングします。<link> は任意のコンポーネントからレンダリングでき、React はほとんどの場合、対応するDOM要素をドキュメントのheadに配置します。

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

以下の例を参照してください。

プロパティ

<link> はすべて共通の要素プロパティをサポートしています。

rel: 文字列、必須。リソースとの関係を指定します。Reactはrel="stylesheet"を持つリンクを他のリンクとは異なる方法で扱います。

これらのプロパティは、rel="stylesheet"の場合に適用されます。

precedence: 文字列。Reactに、ドキュメントの<head>内の他の<link> DOMノードに対する順位を指示します。これにより、どのスタイルシートが他のスタイルシートを上書きできるかが決まります。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：文字列。フェッチ時に送信するRefererヘッダー。可能な値は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は、Reactツリー内のどこにレンダリングされていても、常に<link>コンポーネントに対応するDOM要素をドキュメントの<head>内に配置します。<head>はDOM内で<link>が存在できる唯一の有効な場所ですが、特定のページを表すコンポーネントが<link>コンポーネント自体をレンダリングできる方が便利で、構成性を維持できます。

これにはいくつかの例外があります。

<link>にrel="stylesheet"プロパティがある場合、この特別な動作を得るにはprecedenceプロパティも必要です。これは、ドキュメント内のスタイルシートの順序が重要であるため、Reactはprecedenceプロパティを使用して指定する他のスタイルシートとの相対的な順序を知る必要があるためです。precedenceプロパティを省略すると、特別な動作は発生しません。
<link>要素にitemPropプロパティがある場合、特別な動作はありません。これは、ドキュメント全体ではなく、ページの特定の部分に関するメタデータを表すためです。
<link>要素にonLoadまたはonErrorプロパティがある場合も、特別な動作はありません。この場合、リンクされたリソースの読み込みはReactコンポーネント内で手動で管理しているためです。

スタイルシートの特別な動作

さらに、<link>がスタイルシートへのリンクである場合（つまり、プロパティにrel="stylesheet"を持つ場合）、Reactは次のように特別な処理を行います。

<link>をレンダリングするコンポーネントは、スタイルシートの読み込み中は一時停止（サスペンド）します。
複数のコンポーネントが同じスタイルシートへのリンクをレンダリングする場合、Reactはそれらを重複排除し、DOMに単一のリンクのみを配置します。2つのリンクは、hrefプロパティが同じであれば、同じと見なされます。

この特別な動作には2つの例外があります。

リンクにprecedenceプロパティがない場合、特別な動作はありません。ドキュメント内のスタイルシートの順序は重要であるため、Reactは他のスタイルシートに対するこのスタイルシートの順序を知る必要があります。これはprecedenceプロパティを使用して指定します。
onLoad、onError、またはdisabledプロパティのいずれかを指定した場合、特別な動作はありません。これらのプロパティは、スタイルシートの読み込みをコンポーネント内で手動で管理していることを示しているためです。

この特別な処理には、2つの注意点があります。

リンクがレンダリングされた後、プロパティの変更はReactによって無視されます。（開発環境では、これが発生した場合、警告が表示されます。）
レンダリングしたコンポーネントがアンマウントされた後も、ReactはリンクをDOMに残しておく場合があります。

使用方法

アイコン、正規URL、ピンバックなどの関連リソースへのリンクを使用して、ドキュメントに注釈を付けることができます。Reactは、Reactツリー内のどこにレンダリングされていても、このメタデータをドキュメントの<head>内に配置します。

フォーク

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プロパティを使用してスタイルシートの順序を制御できます。この例では、2つのコンポーネントがスタイルシートをレンダリングしますが、優先順位が高い方が、レンダリングするコンポーネントが先に来ている場合でも、ドキュメントで後に出現します。

フォーク

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はドキュメントのheadに単一の<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>

前へ<textarea>

次へ<meta>