Obtener valores de parámetros de URL de la cadena de consulta en React

1. React enrutador V3
2. React Router V4 y React Router V5

Durante el proceso de creación de una aplicación React, es posible que ocasionalmente necesite extraer un valor de parámetro de la cadena de consulta. Esto le permitirá hacer referencia al valor del parámetro en toda su aplicación.

Con el lanzamiento de React Router v4 en 2017, se eliminó la propiedad analizada this.props.location.query. Los desarrolladores tuvieron que encontrar un nuevo enfoque para leer el valor del parámetro de las cadenas de consulta. En este artículo, veremos las soluciones para las versiones antiguas y nuevas de React.

React enrutador V3

Extraer el valor del parámetro de la cadena query en React Router v3 es fácil. Esta versión de React hace todo el trabajo por ti y proporciona la ubicación analizada como apoyo. Si comprueba el valor del siguiente objeto:

this.props.location.query

Encontrará que contiene los pares key-value de todos los parámetros de su consulta. (La consulta es la parte de su URL que viene después del signo ?)

Si el objeto query no incluye los parámetros que está buscando, también debería consultar los valores de los parámetros path, a los que se puede acceder en:

this.props.match.params.redirectParam

Siempre que esté ejecutando una aplicación con React Router v3 instalado, sus componentes aceptan props, puede obtener valores de parámetros de cadenas query y path.

A partir de la v4, se eliminó el objeto this.props.location.query. La razón principal de su eliminación fue permitir a los desarrolladores crear formas únicas de almacenar cadenas de query.

React Router V4 y React Router V5

Las query en React Router v4 aún son accesibles, pero los desarrolladores deben convertirlas en una cadena por su cuenta. Se crearon bibliotecas como qs y query-string para resolver este problema exacto.

En las versiones más recientes de React Router, puede analizar su objeto query utilizando la interfaz actualizada y la biblioteca query-string.

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

para componentes de clase

El ejemplo anterior se aplica a los componentes de la clase en React.

El uso de bibliotecas para analizar this.props.location.search puede devolver un objeto query analizado, con pares de parámetros key-value y sus valores.

para componentes funcionales

Durante los últimos años, la comunidad de React ha comenzado a renunciar a los componentes de clase en favor de los componentes funcionales. La razón principal detrás del cambio fue la nueva capacidad de los componentes funcionales para usar los ganchos de React.

Al extraer valores de parámetros de una cadena query, en lugar de utilizar el valor de this.props.location.search, utilice la instancia del gancho useLocation().

El gancho no devuelve el objeto query analizado. Aún necesita analizar la instancia del gancho para obtener pares de parámetros key-value y sus valores.

Si ejecuta la aplicación con la versión v4 (o superior) de React-Router, el siguiente código debería darle el resultado deseado:

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

Gracias al gancho useLocation(), este código se ve mucho más limpio.