Comment mettre à jour les paramètres de requête dans React

Les paramètres de requête sont des paires nom/valeur que vous pouvez ajouter à la fin d'une URL. Ils vous permettent de stocker des données dans cette URL.

Une application pratique des paramètres de requête consiste à stocker les valeurs de la recherche d'un utilisateur.

Utilisation de React Router pour mettre à jour les paramètres de requête

Lorsqu'un utilisateur saisit une requête dans une barre de recherche, vous devez stocker cette requête dans l'URL. Par exemple, si un utilisateur a recherché dans une liste de blogs des articles de la catégorie "réagir", l'URL mise à jour devrait ressembler à ceci: /posts? tag=réagir.

React fournit le crochet useSearchParams qui vous aide à lire ou à mettre à jour les chaînes de requête.

Pour commencer, créez une barre de recherche dans App.js.

importer { useState } depuis"réagir";
exporterdéfautfonctionApplication() {
constante [requête, setquery] = useState('')
constante handleChange = (e) => {
ensemblequery(e.cible.valeur)
 };
retour (
<div>
<formerrôle="recherche">
<saisirsur le changement={handleChange}valeur={mettre en doute}taper="recherche" />
former>
div>
 );
}

N'oubliez pas de suivre meilleures pratiques lors de l'utilisation de React pour en tirer le meilleur parti.

Ensuite, installez le routeur React et ajoutez le routage à votre application. Ceci est indispensable pour que le crochet useSearchParams fonctionne.

importer Réagir depuis"réagir";
importer RéagirDOM depuis"react-dom/client";
importer"./index.css";
importer Application depuis"./Application";
importer { NavigateurRouteur, Itinéraire, Itinéraires } depuis"réagir-routeur-dom";
constante root = ReactDOM.createRoot(document.getElementById("racine"));
racine.rendre(
<Réagir. Mode strict>
<NavigateurRouteur>
<Itinéraires>
"/" élément={} />
Itinéraires>
NavigateurRouteur>
Réagir. Mode strict>
);

Vous pouvez maintenant enregistrer les requêtes dans l'URL au fur et à mesure que l'utilisateur les tape en modifiant la fonction handleChange().

importer { useState } depuis"réagir";
importer { useSearchParams } depuis"réagir-routeur-dom";
exporterdéfautfonctionApplication() {
constante [requête, setquery] = useState("");
constante [searchParams, setSearchParams] = useSearchParams({});
constante handleChange = (e) => {
setSearchParams({ mettre en doute: e.target.value });
ensemblequery(e.cible.valeur);
 };
retour (
<div>
<formerrôle="recherche">
<saisirsur le changement={handleChange}valeur={mettre en doute}taper="recherche" />
former>
div>
 );
}

Obtenir les valeurs de requête à partir de l'URL

Vous pouvez obtenir une seule valeur de requête en utilisant searchParams.get() et en transmettant le nom du paramètre de requête.

constante [searchParams, setSearchParams] = useSearchParams({});
constante valeur = searchParams.get('étiqueter')

Pour obtenir tous les paramètres de requête, utilisez searchParams.entries().

constante [searchParams, setSearchParams] = useSearchParams({});
constante valeurs = searchParams.entries()

Cette méthode renvoie un itérateur que vous pouvez itérer à l'aide de paires clé/valeur.

pour (constante [valeur clé] de valeurs) {
console.enregistrer(`${clé}, ${valeur}`);
}

Les paires clé/valeur sont dans l'ordre dans lequel elles apparaissent dans l'URL.

Utiliser les paramètres de requête pour améliorer la partageabilité des résultats de recherche

Le crochet useSearchParams est idéal pour stocker des valeurs de recherche ou toute autre donnée en tant que paramètres de requête dans une URL.

Vous pouvez également suivre les valeurs de recherche avec le crochet useState, mais les stocker dans un paramètre de requête signifie que les gens peuvent les partager via l'URL.