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'}