Maxy.fr

Récupérer les paramètres GET d'une URL avec React.JS

Quoi de plus basique que de récupérer les données fournies en GET dans l'URL d'un site internet, enfin en théorie seulement parce qu'avec React.JS c'est un poil plus compliqué.

Heureusement voici une solution qui va vous permettre de récupérer ces données facilement :

Dans chacune des classes que vous créez en React, vous aurez de base des données incluses dans les props, qu'il sera possible de récupérer via le "constructor". Vous aurez ainsi la possibilité d'obtenir les données GET sous forme de chaine de caractère dans l'objet "props" avec "props.location.search". 

import React, { Component } from 'react';

class Articles extends Component {

	constructor(props)
	{
		super(props);

		var get = props.location.search;
	}

...

Dans l'exemple ci-dessus, si l'URL est "https://www.maxy.fr/ArticlesReact?code=1234&id=234", la variable "get" retournera "?code=1234&id=234".

Il ne reste plus qu'à faire en sorte d'extraire chacun des paramètres de cette chaine de caractère pour que ce soit plus facilement exploitable.

Voici pour cela une fonction qui fera très bien l'affaire :

extractParamsUrl(chaineGET)
{
	chaineGET = chaineGET.split('&');
	var result = {};

	chaineGET.forEach(function(el){
		var param = el.split('=');
		param[0] = param[0].replace('?', '');
		result[param[0]] = param[1];
	});

	return result;
}

Il suffit de donner comme comme paramètre d'entrée (chaineGET) la chaine de caractère fournis par "props.location.search" pour obtenir en retour un objet contenant la liste des paramètres GET.

Avec le premier exemple nous obtiendrons :

{code:'1234', id:'234'}

Catégories : Javascript, React.JS

Par Guillaume le 19/05/2018 à 13:14

Partager l'article :

Articles similaires

Eviter les ralentissements d'un compteur Javascript sur un onglet non actif

Si vous essayez de faire un compteur qui s'incrémente toutes les secondes en Javascript, vous remarquerez que tout fonctionne correctement lorsque vous êtes sur l'onglet en question, mais que celui-ci subira des ralentissements lorsque l'onglet n'est pas actif. Vous avez donc une...

Demander une confirmation en Jquery lors du clique sur un lien

Parce qu'il est parfois utile de demander une confirmation lorsque l'on clique sur un lien avant d'être redirigé - lorsque ce lien permet la suppression de quelque chose par exemple - et qu'il est assez lourd de devoir le faire en PHP, voici un petit code Jquery permettant de le faire...

Exécuter une fonction à retardement en javascript

Il est parfois utile d'exécuter une fonction avec quelques secondes voir quelques minutes de retard. Sachez que c'est très simple à réaliser grâce à la méthode setTimeout(fonction, temps). Cette méthode vous demandera deux arguments : la...