react-router: How do I update the url without causing a navigation/reload?
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.
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.
replace will override the URL
this.props.history.replace({ pathname: `/product/${this.props.product.id}`})