Au-delà du chemin : Query strings et état de navigation

Jusqu'à présent, notre interaction avec l'URL s'est principalement concentrée sur le chemin (`pathname`), que ce soit pour des routes statiques ou dynamiques. Cependant, les URLs peuvent contenir d'autres informations précieuses qui ne font pas partie de la hiérarchie de la route elle-même. Les deux plus importantes sont les paramètres de recherche (aussi appelés query strings ou search params) et l'état de localisation.

Les paramètres de recherche sont la partie de l'URL qui suit le point d'interrogation (`?`), composée de paires clé-valeur (ex: `?q=react&sort=asc&page=2`). Ils sont couramment utilisés pour le filtrage, le tri, la pagination de listes, ou pour passer des informations de configuration qui n'affectent pas fondamentalement la *ressource* demandée mais plutôt sa *présentation*.

L'état de localisation, quant à lui, est un mécanisme propre aux SPA et à l'API History qui permet de passer des données lors de la navigation sans les rendre visibles dans l'URL. C'est utile pour transmettre des informations contextuelles ou temporaires entre les routes (par exemple, un message de succès après une action). React Router fournit des hooks spécifiques pour interagir avec ces deux aspects : `useSearchParams` et `useLocation`.

`useSearchParams` : Lire et écrire les paramètres de recherche

Le hook `useSearchParams` est l'outil dédié à la gestion des paramètres de recherche de l'URL actuelle. Il fonctionne de manière similaire à `useState` en retournant un tableau (tuple) contenant deux éléments :

1. Une instance de l'objet `URLSearchParams` (nous l'appellerons `searchParams`) qui représente les paramètres de recherche actuels et fournit des méthodes pour les lire.

2. Une fonction (nous l'appellerons `setSearchParams`) qui permet de mettre à jour les paramètres de recherche dans l'URL.

L'appel à `setSearchParams` déclenche une nouvelle navigation vers la même route mais avec les nouveaux paramètres, provoquant un re-rendu du composant.

• `searchParams.get('nomParam')` : Récupère la première valeur associée à la clé `nomParam`.
• `searchParams.getAll('nomParam')` : Récupère toutes les valeurs associées à la clé `nomParam` sous forme de tableau (utile si un paramètre peut apparaître plusieurs fois, ex: `?tags=react&tags=javascript`).
• `searchParams.has('nomParam')` : Vérifie si le paramètre existe.
• On peut aussi itérer sur les paramètres avec `searchParams.forEach(...)` ou `for...of searchParams.entries()`.

import React, { useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

function PageResultatsRecherche() {
  const [searchParams] = useSearchParams();

  const termeRecherche = searchParams.get('q'); // Lire le paramètre 'q'
  const tri = searchParams.get('sort') || 'pertinence'; // Lire 'sort' avec une valeur par défaut

  useEffect(() => {
    // Logique pour charger les résultats basés sur termeRecherche et tri
    console.log(`Recherche de: ${termeRecherche}, Tri par: ${tri}`);
  }, [termeRecherche, tri]);

  return (
    

      
Résultats de recherche
      
Terme recherché : {termeRecherche}
      
Tri : {tri}
      {/* Affichage des résultats... */}
    
  );
}

export default PageResultatsRecherche;

• Un objet contenant les nouvelles paires clé-valeur. Les paramètres existants non inclus seront supprimés.
• Une fonction callback qui reçoit l'instance `URLSearchParams` actuelle et doit retourner un nouvel objet `URLSearchParams` (ou un objet littéral) avec les modifications souhaitées. Cette forme est utile pour des mises à jour basées sur les paramètres précédents.

import React from 'react';
import { useSearchParams } from 'react-router-dom';

function FiltresProduits() {
  const [searchParams, setSearchParams] = useSearchParams();

  const handleCategorieChange = (event) => {
    const nouvelleCategorie = event.target.value;
    // Utilisation de la fonction callback pour préserver les autres paramètres
    setSearchParams(prevParams => {
      const newParams = new URLSearchParams(prevParams);
      if (nouvelleCategorie) {
        newParams.set('categorie', nouvelleCategorie);
      } else {
        newParams.delete('categorie'); // Supprimer si aucune catégorie sélectionnée
      }
      newParams.set('page', '1'); // Réinitialiser la page lors du changement de filtre
      return newParams;
    });
  };

  const handlePageChange = (newPage) => {
    // Mise à jour simple en passant un objet
    const newParams = { ...Object.fromEntries(searchParams.entries()), page: newPage.toString() }; 
    setSearchParams(newParams);
  }

  return (
    

      
Filtrer par Catégorie
      
        Toutes
        Electronique
        Vêtements
      
      {/* Logique de pagination avec handlePageChange */}
    
  );
}

export default FiltresProduits;

`useLocation` : Accéder à l'objet location complet

Parfois, vous avez besoin d'accéder à plus d'informations sur l'URL actuelle que seulement les paramètres de recherche ou les paramètres de route. Le hook `useLocation` retourne l'objet `location` actuel, qui représente l'URL dans son ensemble.

Cet objet contient plusieurs propriétés utiles :

• `pathname`: Le chemin de l'URL (ex: `/produits/123`).
• `search`: La chaîne de caractères complète des paramètres de recherche, incluant le `?` initial (ex: `?q=react&sort=asc`). Si vous avez besoin d'un contrôle fin sur les paramètres, `useSearchParams` est généralement plus pratique.
• `hash`: La partie de l'URL après le `#` (ex: `#section-details`).
• `state`: C'est ici que l'on retrouve les données passées via l'option `state` des composants ``, `` ou de la fonction `navigate()`. C'est la seule partie de l'objet `location` qui n'est pas directement dérivée de l'URL visible.
• `key`: Une clé unique associée à cette entrée dans l'historique, utile pour certains scénarios de gestion de cache ou de défilement.

Le principal cas d'usage spécifique à `useLocation` (par rapport à `useParams` ou `useSearchParams`) est l'accès à la propriété `state`.

Utiliser l'état de localisation (`location.state`)

Comme mentionné dans les chapitres sur `` et `useNavigate`, l'option `state` permet de transmettre des données lors d'une navigation sans les afficher dans l'URL. Le composant de la route de destination peut alors lire ces données via `useLocation().state`.

C'est particulièrement utile pour afficher des messages contextuels ou restaurer un état temporaire après une redirection.

Reprenons l'exemple de la redirection après connexion où nous passions `state={{ from: location }}`. La page de connexion (`PageLogin`) utilisait `useLocation` pour savoir où rediriger. Imaginons maintenant une page de confirmation après la création d'un post de blog :

// Dans le composant de formulaire de création de post, après succès :
import { useNavigate } from 'react-router-dom';

function FormulaireCreationPost() {
  const navigate = useNavigate();

  const handleSuccess = (nouveauPostId) => {
    navigate('/post/confirmation', { 
      replace: true, 
      state: { message: 'Votre article a été créé avec succès !', postId: nouveauPostId }
    });
  };
  // ... reste du formulaire ...
}

// Dans le composant de la page de confirmation
// pages/PostConfirmation.js
import React from 'react';
import { useLocation, Link } from 'react-router-dom';

function PostConfirmation() {
  const location = useLocation();
  const message = location.state?.message; // Accès sécurisé au state
  const postId = location.state?.postId;

  return (
    

      
Confirmation
      {message && 
{message}
}
      {postId && (
        

          Vous pouvez voir votre nouvel article ici : 
          Voir l'article #{postId}
        
      )}
      Retour à l'accueil
    
  );
}

export default PostConfirmation;

Ici, `PostConfirmation` utilise `useLocation` pour récupérer le message et l'ID du post passés dans l'état lors de la navigation. L'accès avec l'opérateur de chaînage optionnel (`?.`) est une bonne pratique au cas où l'utilisateur arriverait sur cette page directement sans que l'état ait été défini.

En conclusion, `useSearchParams` et `useLocation` sont des hooks essentiels qui complètent `useParams`. `useSearchParams` est l'outil idéal pour gérer les paramètres de recherche (lecture et écriture), tandis que `useLocation` donne accès à l'ensemble de l'objet `location`, notamment pour lire l'état (`state`) passé lors des navigations. Maîtriser ces hooks permet de construire des interactions utilisateur plus riches et de mieux gérer l'état lié à l'URL dans vos applications React.