I'm currently working on a React project with react-router-dom v6 and I want to get all of the query parameters.
http://localhost:3000/users?page=5&pageSize=25
I want to get both page and pageSize. I know that we can use this code below to get params with the keys.
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>)
}
But, then I tried to get all params without specifying the keys by using searchparams.getAll() but it didn't work and the React app showed only a blank page.
Here is my code I used to get all params:
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>)
}
Did I make any mistake there?
This is my dependencies on package.json:
"dependencies": {
...,
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
...,
},
The URLSearchParams.getAll still takes a key and returns an array of all the values for that key.
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"].
You could use URLSearchParams.entries to return an iterator that can be used to push entries into an array of key/value pairs.
Example:
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>
</>
);
}
You could also use URLSearchParams.forEach to iterate and capture the key/value pairs.
Example:
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>
</>
);
}
With either the .entries for-loop or .forEach method you could instead "reduce" into an object.
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
This all said, it's probably still best to use the .get method and explicitly get the specific queryString parameters.