Contactez-nous

Création de liens (`Link`, `NavLink`)

Apprenez à utiliser les composants Link et NavLink de React Router pour créer une navigation fluide et styliser les liens actifs dans votre application React.

Naviguer sans recharger la page : Le rôle des liens react router

Maintenant que nous avons défini nos routes avec ``, `` et ``, nous avons besoin d'un moyen pour permettre aux utilisateurs de naviguer entre ces différentes vues. Si nous utilisions des balises `` HTML standard avec des attributs `href`, chaque clic provoquerait un rechargement complet de la page, annulant ainsi les bénéfices d'une Single Page Application (SPA). Le navigateur effectuerait une requête HTTP classique vers l'URL spécifiée.

Pour déclencher la navigation côté client gérée par React Router sans rechargement, nous devons utiliser les composants spécifiques fournis par la bibliothèque : principalement `` et sa variante spécialisée ``.

Ces composants, une fois rendus dans le DOM, génèrent bien une balise `` standard, mais ils ajoutent un comportement essentiel : lors d'un clic, ils interceptent l'événement de navigation par défaut, mettent à jour l'URL dans la barre d'adresse via l'API History, et signalent à React Router de rendre le composant correspondant à la nouvelle URL, le tout sans requête serveur.

Le composant `` est l'outil fondamental pour créer des liens de navigation internes dans votre application React.

Sa prop principale et obligatoire est `to`. Elle spécifie la destination de la navigation, c'est-à-dire le chemin (`path`) de la route vers laquelle vous souhaitez naviguer. La valeur de `to` est une chaîne de caractères représentant l'URL cible (par exemple, `/a-propos`, `/utilisateurs/123`).

Voici comment l'utiliser dans un composant, par exemple une barre de navigation simple :

// components/Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

function Navbar() {
  return (
    
  );
}

export default Navbar;

Lorsque l'utilisateur cliquera sur l'un de ces liens, l'URL changera, et le composant `` dans `App.js` rendra la `` correspondante.

Le composant `` accepte également d'autres props moins courantes :

Souvent, dans une interface de navigation (menu principal, barre latérale), il est utile de mettre en évidence visuellement le lien correspondant à la page actuellement affichée. C'est précisément le rôle du composant ``.

`` fonctionne exactement comme `` pour la navigation, mais il possède une fonctionnalité supplémentaire : il sait si son chemin (`to`) correspond à l'URL actuelle. Il peut alors appliquer automatiquement des styles ou des classes CSS spécifiques au lien rendu lorsqu'il est actif.

Pour personnaliser l'apparence du lien actif, `` offre deux props principales (qui peuvent accepter une fonction) :

1. `className` : Vous pouvez fournir une fonction qui reçoit un objet avec une propriété `isActive` (booléenne). La fonction doit retourner la chaîne de caractères des classes CSS à appliquer. Si `isActive` est `true`, vous pouvez ajouter une classe spécifique (par exemple, `active`).

2. `style` : De manière similaire, vous pouvez fournir une fonction recevant `{ isActive }`. La fonction doit retourner un objet de style en ligne. Si `isActive` est `true`, vous pouvez retourner un objet avec les styles spécifiques du lien actif.

Exemple d'utilisation de `NavLink` avec une classe `active` :

// components/Sidebar.js
import React from 'react';
import { NavLink } from 'react-router-dom';
import './Sidebar.css'; // Fichier CSS pour définir la classe .active

function Sidebar() {
  const getActiveClass = ({ isActive }) => (isActive ? 'lien-navigation active' : 'lien-navigation');

  return (
    
  );
}

export default Sidebar;
/* components/Sidebar.css */
.lien-navigation {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

.lien-navigation:hover {
  background-color: #f0f0f0;
}

.lien-navigation.active {
  background-color: dodgerblue;
  color: white;
  font-weight: bold;
}
Important : La prop `end` sur le `NavLink` vers la racine (`/`) est souvent nécessaire. Sans elle, comme `/` est un préfixe de toutes les autres URLs (`/profil`, `/parametres`), le lien "Accueil" serait considéré comme actif même lorsque l'on se trouve sur `/profil`. La prop `end` indique à `NavLink` de ne considérer le lien comme actif que si l'URL correspond *exactement* au chemin `to`.

Exemple avec la prop `style` :

// components/MenuInline.js
import React from 'react';
import { NavLink } from 'react-router-dom';

function MenuInline() {
  const getActiveStyle = ({ isActive }) => ({
    fontWeight: isActive ? 'bold' : 'normal',
    color: isActive ? 'red' : 'black',
    textDecoration: 'none',
    marginRight: '10px'
  });

  return (
    

      Page 1
      Page 2
    

  );
}

export default MenuInline;

En résumé : utilisez `` pour la navigation standard et `` lorsque vous avez besoin de savoir si un lien est actif pour lui appliquer un style ou une classe spécifique, typiquement dans les menus de navigation principaux.