Gérer l’état dans les paramètres de recherche de l’URL
Synchronisez les filtres, le tri et la pagination avec l’URL à l’aide de useSearchParams.
Gérer l’état dans les paramètres de recherche de l’URL est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Pourquoi stocker l’état dans l’URL ?
Les filtres, les requêtes de recherche, les ordres de tri et la pagination doivent figurer dans l’URL afin que les utilisateurs puissent créer un favori, partager la vue et y revenir sans perdre son état.
Hook useSearchParams
useSearchParams() renvoie l’instance actuelle de URLSearchParams ainsi qu’une fonction de mise à jour, de manière similaire à useState, mais en s’appuyant sur la chaîne de requête de l’URL.
import { useSearchParams } from 'react-router-dom';
function ProductList() {
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q') || '';
const page = Number(searchParams.get('page') || 1);
// ...
}Lire un seul paramètre
Utilisez searchParams.get('key') pour lire une valeur. La méthode renvoie null si le paramètre est absent ; prévoyez donc une valeur de remplacement.
const sort = searchParams.get('sort') ?? 'name';
const order = searchParams.get('order') ?? 'asc';Écrire des paramètres sans naviguer
Appelez setSearchParams() avec un nouvel objet ou une fonction de mise à jour pour modifier les paramètres. React Router met à jour l’URL et réaffiche le composant sans navigation complète.
function SortButton({ field }) {
const [searchParams, setSearchParams] = useSearchParams();
const handleClick = () => {
setSearchParams(prev => {
prev.set('sort', field);
prev.set('page', '1');
return prev;
});
};
return <button onClick={handleClick}>Sort by {field}</button>;
}Conserver les autres paramètres lors d’une mise à jour
Utilisez la forme fonctionnelle de mise à jour de setSearchParams afin de ne modifier que les paramètres concernés, tout en conservant les autres.
setSearchParams(prev => {
prev.set('q', newQuery);
// 'sort' and 'page' are unchanged
return prev;
});Synchroniser un champ de saisie avec les paramètres de recherche
Contrôlez la valeur d’un champ de saisie à partir du paramètre de l’URL et mettez à jour l’URL lors de sa modification afin de les garder synchronisés.
function SearchBar() {
const [params, setParams] = useSearchParams();
const q = params.get('q') || '';
return (
<input
value={q}
onChange={e => setParams(prev => {
prev.set('q', e.target.value);
prev.set('page', '1');
return prev;
})}
/>
);
}Indicateurs booléens dans les paramètres de recherche
Utilisez la présence ou l’absence d’un paramètre (ou une chaîne '1'/'0') pour représenter un état booléen de l’interface, comme un panneau ouvert ou des filtres actifs.
const showFilters = searchParams.has('filters');
const toggleFilters = () => {
setSearchParams(prev => {
if (prev.has('filters')) prev.delete('filters');
else prev.set('filters', '1');
return prev;
});
};Valeurs de tableau dans les paramètres de recherche
URLSearchParams prend en charge plusieurs valeurs pour une même clé. Utilisez getAll('key') pour les lire sous forme de tableau.
// URL: /products?tag=react&tag=typescript
const tags = searchParams.getAll('tag'); // ['react', 'typescript']
// Setting multiple values:
const newParams = new URLSearchParams();
selectedTags.forEach(t => newParams.append('tag', t));
setSearchParams(newParams);Remplacer ou ajouter à l’historique
Transmettez { replace: true } comme deuxième argument à setSearchParams afin que les changements de filtre ne surchargent pas l’historique du navigateur.
setSearchParams(prev => { prev.set('q', val); return prev; }, { replace: true });Dériver l’état à partir des paramètres
Calculez les valeurs dérivées (comme des entiers analysés ou des énumérations validées) à partir des paramètres textuels bruts au début de votre composant, afin de les utiliser de manière sûre partout ailleurs.
const rawPage = searchParams.get('page');
const page = Math.max(1, parseInt(rawPage || '1', 10));
const rawSort = searchParams.get('sort');
const sort = ['name', 'price', 'date'].includes(rawSort) ? rawSort : 'name';Créer des liens avec les paramètres de recherche
Utilisez la propriété search d’un objet Link ou to pour naviguer vers une URL contenant des paramètres de requête précis.
<Link to={{ pathname: '/products', search: '?sort=price&order=asc' }}>
Sort by Price
</Link>Vérification rapide
Quelle méthode de URLSearchParams lit toutes les valeurs d’une clé répétée comme ?tag=react&tag=ts ?
Récapitulatif
useSearchParams() synchronise l’état du composant avec la chaîne de requête de l’URL. Utilisez la forme fonctionnelle de mise à jour pour conserver les autres paramètres, { replace: true } pour éviter de surcharger l’historique et getAll() pour les paramètres ayant plusieurs valeurs.
Apprends React avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 88
- Leçons
- 324
Questions Fréquemment Posées
La leçon « Gérer l’état dans les paramètres de recherche de l’URL » est-elle gratuite ?
Oui — le texte complet de « Gérer l’état dans les paramètres de recherche de l’URL » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer l’état dans les paramètres de recherche de l’URL » ?
Synchronisez les filtres, le tri et la pagination avec l’URL à l’aide de useSearchParams. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Gérer l’état dans les paramètres de recherche de l’URL » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Routes imbriquées et mises en page Outlet
- Chargeurs et actions (API du routeur de données)
- Routes protégées et gardes d’authentification
- Gérer l’état dans les paramètres de recherche de l’URL