Actualmente estoy trabajando en un proyecto React con react-router-dom v6 y quiero obtener todos los parámetros de consulta.
http://localhost:3000/users?page=5&pageSize=25Quiero obtener tanto la página como el tamaño de la página. Sé que podemos usar este código a continuación para obtener parámetros con las claves.
import React from 'react' import {useSearchParams} from "react-router-dom"; const Users = () => { const [searchParams, setSearchParams] = useSearchParams(); const page = searchParams.get('page') const pageSize = searchParams.get('pageSize') return (<h1>page: {page}, pageSize: {pageSize}</h1>) } Pero luego traté de obtener todos los parámetros sin especificar las claves usando searchparams.getAll() pero no funcionó y la aplicación React mostró solo una página en blanco.
Aquí está mi código que usé para obtener todos los parámetros:
import React from 'react' import {useSearchParams} from "react-router-dom"; const Users = () => { const [searchParams, setSearchParams] = useSearchParams(); const params = searchParams.getAll(); console.log(params) return (<h1>params</h1>) }¿Cometí algún error ahí?
Estas son mis dependencias en package.json :
"dependencies": { ..., "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.2", ..., },URLSearchParams.getAll todavía toma una clave y devuelve una matriz de todos los valores para esa clave.
let url = new URL('https://example.com?foo=1&bar=2'); let params = new URLSearchParams(url.search); //Add a second foo parameter. params.append('foo', 4); console.log(params.getAll('foo')) //Prints ["1","4"].
Podría usar URLSearchParams.entries para devolver un iterador que se puede usar para insertar entradas en una matriz de pares clave/valor.
Ejemplo:
const Users = () => { const [searchParams, setSearchParams] = useSearchParams(); const params = []; for(let entry of searchParams.entries()) { params.push(entry); } console.log(params); // [["page", 5], ["pageSize", 25]] return ( <> <h1>Params</h1> <ul> {params.map(([key, value]) => ( <li key={key}>{key} - {value}</li> ))} </ul> </> ); } También puede usar URLSearchParams.forEach para iterar y capturar los pares clave/valor.
Ejemplo:
const Users = () => { const [searchParams, setSearchParams] = useSearchParams(); const params = []; searchParams.forEach((key, value) => { params.push([key, value]); }); console.log(params); // [["page", 5], ["pageSize", 25]] return ( <> <h1>Params</h1> <ul> {params.map(([key, value]) => ( <li key={key}>{key} - {value}</li> ))} </ul> </> ); } Con el .entries for-loop o .forEach , podría "reducir" a un objeto.
const params = {}; for(let [key, value] of searchParams.entries()) { params[key] = value; } -- or -- searchParams.forEach((key, value) => { params[key] = value; }); console.log(params); // { page: 5, pageSize: 25 } ... params.page; // 5 params.pageSize; // 25 Dicho todo esto, probablemente sea mejor usar el método .get y obtener explícitamente los parámetros queryString específicos.