React- adding query param with pushState adds trailing slash before params (without react router)

Question

I'm trying to manipulate my query params directly without any library (like react-router- because i don't need them now).
The problem is when i try to add query params using this codes:

let url = new URL(window.location.toString());
url.searchParams.set('someParam', 'someValue');
window.history.pushState(null, "", url);

and when there is no path (I'm in root path), the url becomes http://localhost:3000/?someParam=someValue. but i need it to be like http://localhost:3000?someParam=someValue without trailing slash after host.

Answer 1

To remove the trailing slash after the host in the URL, you can use the pathname property of the URL object to check if it's empty. If it's empty, you can manually construct the URL without the trailing slash.

let url = new URL(window.location.toString());
url.searchParams.set('someParam', 'someValue');

/* Add this condition */
if (url.pathname === '/') {
  url = `${url.origin}${url.search}`;
}

window.history.pushState(null, '', url);