Nommer chaque page de l'application React

Dans une application React, définir un titre unique pour chaque page est essentiel pour améliorer l'expérience utilisateur et le référencement naturel (SEO). Ce guide explique comment nommer chaque page dynamiquement en utilisant document.title.

1. Définir le titre dans chaque composant

Ajoutez une ligne dans le composant React de chaque page pour mettre à jour le titre du document :

document.title = 'Home - SportSee';

Voici un exemple pour une page d'accueil :

const Home = () => {
  document.title = 'Home - SportSee';
  return (
    <div className="home">home</div>
  );
};

2. Éviter de nommer chaque page manuellement

Pour éviter de nommer chaque page individuellement, vous pouvez utiliser une approche centralisée. Cela vous permet de gérer tous les titres dans un seul fichier, simplifiant la maintenance et réduisant les erreurs potentielles.

const pageTitles = {
  home: 'Home - SportSee',
  about: 'About Us - SportSee',
  dashboard: 'Dashboard - SportSee'
};

Ensuite, importez ces titres dans chaque page et mettez à jour le titre dynamiquement :

document.title = pageTitles.home;

3. Utiliser un Hook personnalisé

Pour simplifier davantage la gestion des titres, vous pouvez créer un Hook personnalisé :

import { useEffect } from 'react';

const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title]);
};

Exemple d'utilisation :

const Home = () => {
  useDocumentTitle('Home - SportSee');
  return (
    <div className="home">home</div>
  );
};

Conclusion

En définissant des titres uniques pour chaque page de votre application React, vous améliorez non seulement l'expérience utilisateur mais aussi le SEO de votre site. Adoptez une approche centralisée ou utilisez des Hooks pour une gestion simplifiée.