Cómo actualizar los parámetros de consulta en React

Los parámetros de consulta son pares de nombre/valor que puede agregar al final de una URL. Le permiten almacenar datos en esa URL.

Una aplicación práctica de los parámetros de consulta es almacenar valores de la búsqueda de un usuario.

Uso de React Router para actualizar los parámetros de consulta

Cuando un usuario ingresa una consulta en una barra de búsqueda, debe almacenar esa consulta en la URL. Por ejemplo, si un usuario buscó publicaciones en la categoría "reaccionar" en una lista de blogs, la URL actualizada debería verse así: /posts? etiqueta = reaccionar.

React proporciona el enlace useSearchParams que lo ayuda a leer o actualizar cadenas de consulta.

Para comenzar, cree una barra de búsqueda en App.js.

importar { estado de uso } de"reaccionar";
exportarpor defectofunciónaplicación() {
constante [consulta, establecerconsulta] = useState('')
constante handleChange = (mi) => {
establecer consulta(mi.objetivo.valor)
 };
devolver (
<división>
<formarole="buscar">
<aporteonChange={manejarcambio}valor={consulta}tipo="buscar" />
forma>
división>
 );
}

Recuerda seguir mejores prácticas al usar React para sacarles el máximo partido.

Luego, instale el enrutador React y agregue enrutamiento a su aplicación. Esto es imprescindible para que funcione el enlace useSearchParams.

importar Reaccionar de"reaccionar";
importar ReactDOM de"reaccionar-dom/cliente";
importar"./index.css";
importar aplicación de"./Aplicación";
importar { NavegadorRouter, Ruta, Rutas } de"reaccionar-router-dom";
constante root = ReactDOM.createRoot(documento.getElementById("raíz"));
raíz.prestar(
<Reaccionar. Modo estricto>
<NavegadorRouter>
<Rutas>
"/" elemento={} />
Rutas>
NavegadorRouter>
Reaccionar. Modo estricto>
);

Ahora puede guardar las consultas en la URL a medida que el usuario escribe modificando la función handleChange().

importar { estado de uso } de"reaccionar";
importar { useSearchParams } de"reaccionar-router-dom";
exportarpor defectofunciónaplicación() {
constante [consulta, establecerconsulta] = useState("");
constante [searchParams, setSearchParams] = useSearchParams({});
constante handleChange = (mi) => {
setSearchParams({ consulta: e.objetivo.valor });
establecer consulta(mi.objetivo.valor);
 };
devolver (
<división>
<formarole="buscar">
<aporteonChange={manejarcambio}valor={consulta}tipo="buscar" />
forma>
división>
 );
}

Obtener los valores de consulta de la URL

Puede obtener un único valor de consulta utilizando searchParams.get() y pasando el nombre del parámetro de consulta.

constante [searchParams, setSearchParams] = useSearchParams({});
constante valor = searchParams.get('etiqueta')

Para obtener todos los parámetros de consulta, use searchParams.entries().

constante [searchParams, setSearchParams] = useSearchParams({});
constante valores = searchParams.entries()

Este método devuelve un iterador que puede iterar usando pares clave/valor.

para (constante [valor clave] de valores) {
consola.registro(`${clave}, ${valor}`);
}

Los pares clave/valor están en el orden en que aparecen en la URL.

Utilice parámetros de consulta para mejorar la compartibilidad de los resultados de búsqueda

El enlace useSearchParams es excelente para almacenar valores de búsqueda o cualquier otro dato como parámetros de consulta en una URL.

También puede realizar un seguimiento de los valores de búsqueda con el enlace useState, pero almacenarlos en un parámetro de consulta significa que las personas pueden compartirlos a través de la URL.