How to detect change in query string without using react-router in react application and also how do we get access to search params?

Question

I have a select element and I want to filter the list of items when the select filter changes. Along with this I am want to add the selected option in the url query string. I am not using react-router dom. I using astro for this project. The prblem I am facing is that , when I use the following snippet

  const url = new URL(window.location.href);
    url.searchParams.set("team", e.target.value.toLowerCase());
    window.location = url;

the entire page gets reloaded. Is there anything else I can do?

For my second question, we have got window.location.search Cna we directly access the query string with the keys? Eg: /?team=abc I want to directly access team instead of doing regex or string manipulation.

Answer 1

This works for me - history.pushState(null, "", url.toString());