How to get all query params using React-Router-DOM v6 `useSearchParams` without specifying the key?

Question

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",
    ...,
  },

Answer 1

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((value, key) => {
    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((value, key) => {
  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.