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

Categories : Javascript, React.JS

By Guillaume - 05/19/2018 at 01:14 pm

Shar this article :

Similar articles

Easily add a dual-slider to your HTML forms

When designing HTML forms, you may quickly find yourself limited by the basic form elements provided. For example, if you use sliders with the <input type="range"> element, they only allow the use of a single slider per element. However, there may be times when you need a field with two...

Avoiding slowdowns of a JavaScript counter on an inactive tab

If you're trying to create a Javascript counter that increments every second, you may notice that it works correctly when you're on the active tab but experiences slowness when the tab is not active. This can lead to a desynchronization between the counted seconds and real-time. Here's a simple...