Concat multiple query param in react-router

Question

I am using react-router-dom v 5.2.0. I want to add multiple query params in the URL and I'm not sure how to accomplish it. My route looks like this:

<Route path="/admin/users" component={UserList} />

I want to pass multiple query params like...

/admin/users?search=hello&page=1&user_role=admin

Currently I'm doing it manually like...

<Link to="/admin/users?user_role=admin" />

However, with this manual thing I cannot concat multiple query params. Is there a way to concat the query params dynamically? Does react-router-dom has it's own way of doing such things?

1

Yes, thank you @SMAKSS. – Abeid Ahmed May 24 '20 at 19:12

score 10 · Accepted Answer · answered May 24 '20 at 19:11

10

You can make use of query-string package to parse queryParams into object which will allow you to edit them easily and then stringify them before you pass them to link.

import qs from 'query-string';

...
const queryParam = qs.parse(location.search);
const newQueryParam = {
   ...queryParam,
   user_role: 'admin',
   something_else: 'something',
}


...
<Link to={{ pathname: '/admin/users', search: qs.stringify(newQueryParam)}} />

answered May 24 '20 at 19:11

Shubham Khatri

270,417
55
406
400

1

This works too. Thanks! – Abeid Ahmed May 24 '20 at 19:15
1

Happy to have helped. I just feel its a little more convenient than URLSearchParams – Shubham Khatri May 24 '20 at 19:20
Yes, I felt the same after using both the solutions. I've accepted your answer because of the convenience. – Abeid Ahmed May 24 '20 at 19:48

score 4 · Answer 2 · answered May 24 '20 at 19:12

The answer was on the link provided by SMAKSS. The trick was to set the key value pair to the URLSearchParams.

  const addQuery = (key, value) => {
    let pathname = location.pathname;
    // returns path: '/app/books'
    let searchParams = new URLSearchParams(location.search);
    // returns the existing query string: '?type=fiction&author=fahid'
    searchParams.set(key, value);
    history.push({
      pathname: pathname,
      search: searchParams.toString()
    });
  };

... and then you can use like this...

<button onClick={() => addQuery("page", 2)>Page 2</button>

Concat multiple query param in react-router

2 Answers2

Linked