title: How to detect change in the URL hash in Next.js?
body: <p>How do we detect a change in the URL hash of a Next.js project?</p>
  <p>I don't want to reload my page every time the slug changes.</p>
  <p>I cannot use <code>&lt;Link&gt;</code> since all of my data comes from DB</p>
  <p><strong>Example:</strong>
  When clicking on an  tag from <br>
  <code>http://example/test#url1</code><br>
  to <br>
  <code>http://example.com/test#url2</code></p>
  <p>Tried the below, but this seems to work for path change only.</p>
  <pre><code>import React, { useEffect,useState } from 'react';
  import { useRouter } from 'next/router'
  
  const test = () =&gt; {
      const router = useRouter();
  
      useEffect(() =&gt; {
          console.log(router.asPath);
      }, [router.asPath]);
  
      return (&lt;&gt;&lt;/&gt;);
  };
  
  export default test;
  </code></pre>