Add Parameters to Url Without Refresh

How can I add a parameter to my url, without reload the page?

Use window.history.pushState( {} , '', '?fare=standar' );

This should update the url without refresh.

You can also do a bit of reseach on pushState as the implementation can differ.

Change URl without page refresh NEXT.JS

With the help of shallow-routing change of URL without doing a page reload is possible. It can be enabled by passing explicit option object as third argument to Router.push, i.e { shallow: true }

From the docs

Shallow routing allows you to change the URL without running data fetching methods again, that includes getServerSideProps, getStaticProps, and getInitialProps.

You'll receive the updated pathname and the query via the router object (added by useRouter or withRouter), without losing state.

For example, this how you would update the query param sortBy for pathname /products with the help of shallow-routing.

Router.push({
  pathname: '/products',
  query: { sortBy: 'price' }
}, 
undefined, { shallow: true }
)

But there are a few caveats It is not possible to do shallow-routing between different pages, it works only for same page URL changes. See the caveat section for more details.

For example, you can update a query param for page /product page, but it won't be possible if you try to do shallow-routing from /product to /product/[slug] because they are two distinct pages.

// page will reload because shallow-routing not possible between the pages
Router.push('/product', '/product/some-product?sortBy=price', { shallow: true })

Append parameter in url without reloading page

You can only do this using history.pushState(state, title, url) which is an HTML5 feature.

Update parameter of URL (without refresh)

Using replaceState you should do it like this:
It will produce the expected result

https://deusbot-trading.com/quiz/age=45+&exp=&asset=

after you apply this

history.replaceState({}, null, location.href.replace('age=','age=45+'))

for further changes just continue with the same way:

history.replaceState({}, null, location.href.replace('exp=','exp=1000'))

Notes

The only part affecting the url is the 3rd argument

history.replaceState(data, title [, url ])

---

Related Topics