Is there a way to set the values of a queryString using nextjs and reactjs?
My page has a filter list that when clicked, will alter the in-page results pane on the right-hand side.
I'm trying to update the queryString values of the URL, so if the user leaves the page, then clicks the "back" buttons they'll be returning to the last filter selection set.
For example: Landing:.com/path?key=currentPage%3D1%26pageSize%3D10 After click on filter:.com/path?key=currentPage%3D1%26pageSize%3D10%26gte%3D1655577000000%26lte%3D1656440999999%26keyName%3DcreatedAt%26filters%3D%5B%7B"siteId"%3A10%7D%5D
Is this possible?
window.history.pushState({}, null, newUrl);
Depending on the browser version you use multiple options are available. Check Thiss
Yes it is, you can use the useRouter hook. Here is a sample usage:
const router = useRouter()
useEffect(() => {
// find your current path here, and change the query
router.push('/?counter=10', undefined, { shallow: true })
}, []) // add your filter dependencies
For more, read the docs: https://nextjs.org/docs/routing/shallow-routing