Referensi API
Komponen

<link> - This feature is available in the latest Canary

Canary

Ekstensi React untuk <link> saat ini hanya tersedia di kanal canary dan eksperimental React. Pada rilis stabil React, <link> hanya berfungsi sebagai komponen HTML bawaan peramban. Pelajari lebih lanjut tentang kanal rilis React di sini.

Komponen <link> bawaan peramban memungkinkan Anda menggunakan sumber daya eksternal seperti stylesheet atau memberi anotasi pada dokumen dengan metadata tautan.

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

Referensi

<link>

Untuk menautkan ke sumber daya eksternal seperti stylesheet, font, dan ikon, atau untuk memberi anotasi pada dokumen dengan metadata tautan, renderlah komponen <link> bawaan peramban. Anda dapat me-render <link> dari komponen mana pun dan React dalam kebanyakan kasus akan menempatkan elemen DOM yang sesuai di bagian head dokumen.

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

Lihat lebih banyak contoh di bawah ini.

Props

<link> mendukung semua props elemen umum.

Props ini berlaku ketika rel="stylesheet":

  • precedence: string. Memberitahu React di mana peringkat node DOM <link> tergantung pada yang lain di dokumen <head>, yang menentukan stylesheet mana yang dapat menimpa yang lain. React akan menyimpulkan bahwa nilai precedence yang ditemukan pertama kali adalah “lebih rendah” dan nilai precedence yang ditemukan kemudian adalah “lebih tinggi”. Banyak sistem gaya dapat berfungsi dengan baik menggunakan satu nilai precedence karena aturan gaya bersifat atomik. stylesheet dengan precedence yang sama akan dikelompokkan bersama baik mereka adalah tag <link> atau tag <style> inline atau dimuat menggunakan function preinit.
  • media: string. Membatasi stylesheet pada media query tertentu.
  • title: string. Menentukan nama dari stylesheet alternatif.

Props ini berlaku ketika rel="stylesheet" tetapi menonaktifkan perlakuan khusus stylesheet oleh React:

disabled: boolean. Menonaktifkan stylesheet. onError: function. Dipanggil ketika stylesheet gagal dimuat. onLoad: function. Dipanggil ketika stylesheet selesai dimuat.

Props ini berlaku ketika rel="preload" atau rel="modulepreload":

as: string. Jenis sumber daya. Nilai yang mungkin adalah audio, document, embed, fetch, font, image, object, script, style, track, video, worker. imageSrcSet: string. Berlaku hanya ketika as="image". Menentukan source set dari gambar. imageSizes: string. Berlaku hanya ketika as="image". Menentukan ukuran gambar.

Props ini berlaku ketika rel="icon" atau rel="apple-touch-icon":

Props ini berlaku dalam semua kasus:

  • href: string. URL dari sumber daya yang ditautkan.
  • crossOrigin: string. Kebijakan CORS yang digunakan. Nilai yang mungkin adalah anonymous dan use-credentials. Diperlukan ketika as diatur ke "fetch".
  • referrerPolicy: string. Header Referrer yang dikirim saat mengambil. Nilai yang mungkin adalah no-referrer-when-downgrade (default), no-referrer, origin, origin-when-cross-origin, dan unsafe-url.
  • fetchPriority: string. Menyarankan prioritisasi terhadap pengambilan sumber daya. Nilai yang mungkin adalah auto (default), high, dan low.
  • hrefLang: string. Bahasa dari sumber daya yang ditautkan.
  • integrity: string. Hash kriptografi dari sumber daya, untuk memverifikasi keasliannya.
  • type: string. Tipe MIME dari sumber daya yang ditautkan.

Props yang tidak direkomendasikan untuk digunakan dengan React:

  • blocking: string. Jika diatur ke "render", instruksikan peramban untuk tidak me-render halaman sampai stylesheet dimuat. React memberikan kendali yang lebih halus menggunakan Suspense.

Perilaku rendering khusus

React akan selalu menempatkan elemen DOM yang sesuai dengan komponen <link> di dalam <head> dokumen, terlepas dari mana dalam pohon React itu di-render. <head> adalah satu-satunya tempat valid untuk <link> dalam DOM, namun ini sesuai dan menjaga hal-hal tetap dapat dikomposisikan jika sebuah komponen yang mewakili halaman tertentu dapat me-render komponen <link> itu sendiri.

Ada beberapa pengecualian untuk ini:

  • Jika <link> memiliki prop rel="stylesheet", maka harus juga memiliki prop precedence untuk mendapatkan perilaku khusus ini. Ini karena urutan stylesheet dalam dokumen ialah penting, sehingga React perlu tahu bagaimana mengatur stylesheet ini tergantung pada yang lain, yang Anda tentukan menggunakan prop precedence. Jika prop precedence dihilangkan, tidak ada perilaku khusus.
  • Jika <link> memiliki prop itemProp, tidak ada perilaku khusus, karena dalam kasus ini tidak berlaku untuk dokumen tetapi mewakili metadata tentang bagian spesifik dari halaman.
  • Jika <link> memiliki prop onLoad atau onError, karena dalam kasus ini Anda mengelola pemuatan sumber daya yang ditautkan secara manual dalam komponen React Anda.

Perilaku khusus untuk stylesheet

Selain itu, jika <link> menuju stylesheet (yaitu, memiliki rel="stylesheet" dalam props), React memperlakukannya secara khusus dalam cara berikut:

  • Komponen yang me-render <link> akan menangguhkan saat stylesheet sedang dimuat.
  • Jika beberapa komponen me-render tautan ke stylesheet yang sama, React akan menghapus duplikatnya dan hanya menempatkan satu tautan ke dalam DOM. Dua tautan dianggap sama jika mereka memiliki prop href yang sama.

Ada dua pengecualian untuk perilaku khusus ini:

  • Jika tautan tidak memiliki prop precedence, tidak ada perilaku khusus, karena urutan stylesheet dalam dokumen itu penting, sehingga React perlu tahu bagaimana mengatur stylesheet ini tergantung pada yang lain, yang Anda tentukan menggunakan prop precedence.
  • Jika Anda memberikan salah satu dari prop onLoad, onError, atau disabled, tidak ada perilaku khusus, karena prop ini menunjukkan bahwa Anda mengelola pemuatan stylesheet secara manual dalam komponen Anda.

Perlakuan khusus ini memiliki dua peringatan:

  • React akan mengabaikan perubahan pada semua props setelah tautan di-render. (React akan mengeluarkan peringatan dalam pengembangan jika ini terjadi.)
  • React dapat meninggalkan tautan dalam DOM bahkan setelah komponen yang me-render-nya dihapus.

Penggunaan

Menautkan ke sumber daya terkait

Anda dapat memberi anotasi pada dokumen dengan tautan ke sumber daya terkait seperti ikon, URL kanonik, atau pingback. React akan menempatkan metadata ini di dalam <head> dokumen terlepas dari mana dalamnya pohon React itu di-render.

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>Blog saya</h1>
      <p>...</p>
    </ShowRenderedHTML>
  );
}

Menautkan ke stylesheet

Jika sebuah komponen bergantung pada stylesheet tertentu agar dapat ditampilkan dengan benar, Anda dapat me-render tautan ke stylesheet tersebut di dalam komponen. Komponen Anda akan menangguhkan saat stylesheet sedang dimuat. Anda harus menyertakan prop precedence, yang memberi tahu React di mana harus menempatkan stylesheet ini tergantung pada yang lain — stylesheet dengan precedence lebih tinggi dapat menimpa yang dengan precedence lebih rendah.

Catatan

Ketika Anda ingin menggunakan stylesheet, akan lebih berguna saat memanggil function preinit. Memanggil function ini dapat memungkinkan peramban untuk mulai mengambil stylesheet lebih awal daripada jika Anda hanya me-render komponen <link>, misalnya dengan mengirimkan respons 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>
  );
}

Mengendalikan precedence stylesheet

Stylesheet dapat bertentangan satu sama lain, dan ketika itu terjadi, peramban akan memilih yang datang kemudian dalam dokumen. React memungkinkan Anda mengendalikan urutan stylesheet dengan prop precedence. Dalam contoh ini, dua komponen me-render stylesheet, dan yang memiliki precedence lebih tinggi akan muncul kemudian dalam dokumen meskipun komponen yang me-render-nya datang lebih awal.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HalamanRumah() {
  return (
    <ShowRenderedHTML>
      <KomponenPertama />
      <KomponenKedua />
      ...
    </ShowRenderedHTML>
  );
}

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

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

Merender stylesheet yang dihapus duplikatnya

Jika Anda me-render stylesheet yang sama dari beberapa komponen, React hanya akan menempatkan satu <link> di bagian head dokumen.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function HalamanRumah() {
  return (
    <ShowRenderedHTML>
      <Komponen />
      <Komponen />
      ...
    </ShowRenderedHTML>
  );
}

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

Memberi anotasi pada item tertentu dalam dokumen dengan tautan

Anda dapat menggunakan komponen <link> dengan prop itemProp untuk memberi anotasi pada item tertentu dalam dokumen dengan tautan ke sumber daya terkait. Dalam hal ini, React tidak akan menempatkan anotasi ini di dalam <head> dokumen tetapi akan menempatkannya seperti komponen React lainnya.

<section itemScope>
  <h3>Memberi anotasi terhadap item tertentu</h3>
  <link itemProp="penulis" href="http://example.com/" />
  <p>...</p>
</section>
Sebelumnya<textarea>
Selanjutnya<meta>