Référence de l’API
Composants

<title> - Cette fonctionnalité est disponible dans le dernier Canary

Canary (fonctionnalité expérimentale)

Les extensions de React à <title> ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, <title> fonctionne comme le composant HTML natif du navigateur. Apprenez-en davantage sur les canaux de livraison React.

Le composant natif <title> du navigateur vous permet de préciser le titre de votre document.

<title>Mon blog</title>

Référence

<title>

Pour définir le titre de votre document, utilisez le composant natif <title> du navigateur. Vous pouvez utiliser <title> depuis n’importe quel composant et React placera toujours l’élément DOM correspondant dans l’en-tête (head) du document.

<title>Mon blog</title>

Voir d’autres exemples plus bas.

Props

<title> prend en charge toutes les props communes aux éléments.

  • children : <title> accepte uniquement du texte comme enfant. Ce texte devient le titre du document. Vous pouvez également passer vos propres composants, du moment que leur rendu aboutit à du texte.

Comportement spécifique de rendu

React placera toujours l’élément DOM correspondant au composant <title> dans le <head> du document, peu importe où il figure dans l’arborescence React. Le <head> est le seul endroit valide pour un <title> dans le DOM, mais il est plus confortable, et préférable en termes de composition, qu’un composant représentant une page donnée puisse produire les composants <title> lui-même.

Il y a toutefois deux exceptions :

  • Si le <title> figure au sein d’un composant <svg>, aucun comportement spécifique n’est mis en place, parce que dans un tel cas il ne représente pas le titre du document, mais constitue plutôt une annotation d’accessibilité pour le graphique SVG.
  • Si le <title> a une prop itemProp, aucun comportement spécifique n’est mis en place, parce que dans un tel cas le titre ne s’applique pas au document mais à une partie spécifique de la page.

Piège

Ne produisez qu’un seul <title> à la fois au sein de votre rendu. Si plus d’un composant utilise une balise <title> à la fois, React placera l’ensemble de ces titres dans l’en-tête du document. Dans un tel cas, le comportement des navigateurs comme celui des moteurs de recherche n’est pas spécifié.

Utilisation

Définir le titre du document

Utilisez le composant <title> dans n’importe quel composant, avec du texte comme enfant. React placera le nœud DOM <title> associé dans le <head> du document.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function ContactUsPage() {
  return (
    <ShowRenderedHTML>
      <title>Mon site : Contactez-nous</title>
      <h1>Contactez-nous</h1>
      <p>Envoyez-nous un e-mail à support@example.com</p>
    </ShowRenderedHTML>
  );
}

Utiliser des variables dans le titre

Les enfants du composant <title> doivent être constitués d’une unique chaîne de caractères. (Ou d’un unique nombre, ou d’un unique objet doté d’une méthode toString.) Ce qui n’est pas immédiatement évident, c’est qu’en utilisant des expressions JSX comme ci-dessous…

<title>Page {pageNumber} de résultats</title> // 🔴 Souci : il ne s’agit pas d’un unique texte

…le composant <title> reçoit en réalité un tableau de trois éléments comme enfants (le texte"Page ", la valeur de pageNumber et le texte " de résultats"). Ça entraînerait une erreur. Utilisez plutôt l’interpolation au sein d’un texte unique passé à <title> :

<title>{`Page ${pageNumber} de résultats`}</title>
Précédent<style>
SuivantFonctions