Is there any way to set url when I click button in next js

Question

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?

score 1 · Answer 1 · answered Jun 29 '22 at 07:16

1

window.history.pushState({}, null, newUrl);

Depending on the browser version you use multiple options are available. Check Thiss

answered Jun 29 '22 at 07:16

gecapo

83
5

score 1 · Answer 2 · answered Jun 29 '22 at 07:20

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

Is there any way to set url when I click button in next js

2 Answers2