Obtenir les valeurs des paramètres d'URL à partir de la chaîne de requête dans React

1. React Router V3
2. React Router V4 et React Router V5

Tout au long du processus de création d’une application React, vous devrez peut-être occasionnellement extraire une valeur de paramètre de la chaîne de requête. Cela vous permettra de référencer la valeur parameter dans l’ensemble de votre application.

Avec la sortie de React Router v4 en 2017, la propriété analysée this.props.location.query a été supprimée. Les développeurs ont dû trouver une nouvelle approche pour lire la valeur du paramètre à partir des chaînes de requête. Dans cet article, nous examinerons les solutions pour les anciennes et les nouvelles versions de React.

React Router V3

Extraire la valeur du paramètre de la chaîne query dans React Router v3 est facile. Cette version de React fait tout le travail pour vous et fournit l’emplacement analysé en tant qu’accessoire. Si vous vérifiez la valeur de l’objet suivant :

this.props.location.query

Vous constaterez qu’il contient les paires key-value de tous les paramètres de votre requête. (La requête est la partie de votre URL qui vient après le signe ?)

Si l’objet query n’inclut pas les paramètres que vous recherchez, vous devez également consulter les valeurs des paramètres path, qui sont accessibles à l’adresse :

this.props.match.params.redirectParam

Tant que vous exécutez une application avec React Router v3 installé, vos composants acceptent les props, vous pouvez obtenir les valeurs des paramètres à partir des chaînes query et du path.

À partir de la v4, l’objet this.props.location.query a été supprimé. La principale raison de sa suppression était de permettre aux développeurs de créer des moyens uniques de stocker les chaînes de query.

React Router V4 et React Router V5

Les query dans React Router v4 sont toujours accessibles, mais les développeurs doivent les convertir eux-mêmes en une chaîne. Des bibliothèques comme qs et query-string ont été créées pour résoudre exactement ce problème.

Dans les versions plus récentes de React Router, vous pouvez analyser votre objet query à l’aide de l’interface mise à jour et de la bibliothèque query-string.

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

pour les composants de classe

L’exemple ci-dessus s’applique aux composants de classe dans React.

L’utilisation des bibliothèques pour analyser this.props.location.search peut renvoyer un objet query analysé, avec des paires de paramètres key-value et leurs valeurs.

pour les composants fonctionnels

Au cours des dernières années, la communauté React a commencé à abandonner les composants de classe au profit de composants fonctionnels. La principale raison du changement était la nouvelle capacité des composants fonctionnels à utiliser des crochets React.

Lors de l’extraction des valeurs de paramètres d’une chaîne query, au lieu d’utiliser la valeur de this.props.location.search, utilisez l’instance du hook useLocation().

Le hook ne retourne pas l’objet query analysé. Vous devez toujours analyser l’instance du hook pour obtenir les paires de paramètres key-value et leurs valeurs.

Si vous exécutez l’application avec la version v4 (ou supérieure) de React-Router, le code suivant devrait vous donner le résultat souhaité :

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

Grâce au hook useLocation(), ce code a l’air beaucoup plus propre.