react-router: How do I update the url without causing a navigation/reload?

Question

With react router I have done this up update the url:

this.props.history.push({             pathname: `/product/${this.props.product.id}`,         }); 

However this causes a re-render/navigation change. Is there a way to update the url without doing that?

My use case is I have a list of products and when I click on one I show a Modal and want to update the url to something like example.com/product/1 so that the link is sharable.

Answer 1

Wasn't able to find a solution using React Router, but was able to accomplish this using the browser's history interface by calling:

window.history.replaceState(null, "New Page Title", "/pathname/goes/here") 

You can learn more about .replaceState here.

React Router's history.replace won't always work

React Router's history.replace method may or may not trigger a re-render depending on your app's route setup (e.g., you have a catch-all /* route). It does not prevent a render by definition.