How to detect in JavaScript if URL parameters change in next js?

Question

I am using a class base component and I do not want to use a functional component

component1.js

// web default watch id is 1 e.g /watch?id=1

const newURL = "/watch?id=2";
window.history.pushState(null, null, newURL);

I tried the following code but it's not working :

component2.js

window.onpopstate = () => {
    console.log("Change in parameter detected");
 };

I also tried "onhashchange" but it works only when hash changes in URL bar :

window.onhashchange= () => {
    console.log("Change in parameter detected");
 };

score 0 · Answer 1 · answered Aug 30 '23 at 16:52

When you use the history.pushState, you are bypassing the event. If you want call the event you need use the code bellow:

<script>
window.onpopstate = () => {
    console.log("Change in parameter detected");
 };
 window.onhashchange= () => {
    console.log("Change in parameter detected");
 };
 console.log("Start");
const newURL =window.document.location.href +  "#id=2";
window.document.location.href = newURL; 
</script>

How to detect in JavaScript if URL parameters change in next js?

1 Answers1