Composant <Link>

Définitions Digital > Composant <Link>

Le composant <Link> (issu de react-router-dom) est un composant de navigation déclarative conçu pour les applications React.

Il permet de créer des liens interactifs qui modifient l’URL du navigateur sans déclencher de rechargement de page, tout en préservant la sémantique HTML et l’accessibilité.

Fonctionnement clé

Le composant <Link> de React Router (ex: react-router-dom) intercepte le clic sur le lien, utilise l’API History du navigateur (pushState) pour mettre à jour l’URL, et déclenche le rendu du composant associé sans recharger la page.

Aspect Détail
Comportement Intercepte le clic → utilise history.pushState() → met à jour l’URL → déclenche le rendu de la nouvelle route via React Router
Rendu final Génère une balise sémantique avec href valide (ex: Profil)
Accessibilité Navigation clavier (Tab/Entrée)
Compatible lecteurs d’écran
Comportement attendu (soulignement, clic droit → « Ouvrir dans un nouvel onglet »)
Props essentiels to (chemin ou objet), state (données de navigation), replace, className, etc.

Exemple concret

import { Link, NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      {/* Lien basique */}
      <Link to="/accueil">Accueil</Link>
      
      {/* Lien avec paramètre dynamique */}
      <Link to={`/profil/${userId}`}>Mon profil</Link>
      
      {/* Lien avec état (accessible via useLocation().state) */}
      <Link 
        to="/confirmation" 
        state={{ from: "panier" }}
      >
        Valider
      </Link>
      
      {/* NavLink : classe active automatique */}
      <NavLink 
        to="/dashboard" 
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        Tableau de bord
      </NavLink>
    </nav>
  );
}

Bonnes pratiques

  1. Jamais utiliser <a href="/route"> pour naviguer entre routes internes d’une SPA. <a> fonctionne, mais elle déclenche un rechargement indésirable dans une SPA.
  2. Utiliser <NavLink> pour les éléments de menu nécessitant un état « actif ».
  3. Pour les liens externes (ex: https://exemple.com), conserver <a> avec target="_blank" et rel="noopener noreferrer".
  4. En cas de navigation programmatique (ex: après submit), utiliser le hook useNavigate().

Accessibilité préservée

<Link> génère une balise <a> sémantique avec un attribut href valide, ce qui permet :

  • Une navigation au clavier fonctionnelle (tabulation, entrée)
  • Une compatibilité avec les lecteurs d’écran
  • Un comportement prévisible pour les utilisateurs (soulignement, style hover, etc.)
  • L’ouverture dans un nouvel onglet via clic droit (contrairement à un <button> ou <div> avec onClick).
Explorer les thématiques : React
Les contenus de définition restent publics. Les ressources (outils, grilles, supports) liées à cette fiche sont disponibles dans l’espace membre.

Plus de publications