How to detect change in the url hash in next.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  useEffect(() => {
    const handleHashChange = () => {
      // Do something when the hash in the URL changes
      console.log('Hash changed:', window.location.hash);
    };

    // Add an event listener to listen for hash changes
    window.addEventListener('hashchange', handleHashChange);

    return () => {
      // Clean up by removing the event listener
      window.removeEventListener('hashchange', handleHashChange);
    };
  }, []);

  return <div>This is my component</div>;
};

export default MyComponent;