How to detect change in the URL hash in Next.js?

Question

How do we detect a change in the URL hash of a Next.js project?

I don't want to reload my page every time the slug changes.

I cannot use <Link> since all of my data comes from DB

Example: When clicking on an tag from
http://example/test#url1
to
http://example.com/test#url2

Tried the below, but this seems to work for path change only.

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

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

    useEffect(() => {
        console.log(router.asPath);
    }, [router.asPath]);

    return (<></>);
};

export default test;

juliomalves · Accepted Answer · 2021-09-27T11:03:19.367

22

You can listen to hash changes using hashChangeStart event from router.events.

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

    useEffect(() => {
        const onHashChangeStart = (url) => {
            console.log(`Path changing to ${url}`);
        };

        router.events.on("hashChangeStart", onHashChangeStart);

        return () => {
            router.events.off("hashChangeStart", onHashChangeStart);
        };
    }, [router.events]);

    return (
        <>
            <Link href="/#some-hash">
                <a>Link to #some-hash</a>
            </Link>
            <Link href="/#some-other-hash">
                <a>Link to #some-other-hash</a>
            </Link>
        </>
    );
};

If you're not using next/link or next/router for client-side navigation (not recommended in Next.js apps), then you'll need to listen to the window's hashchange event.

Your useEffect would look like the following.

useEffect(() => {
    const onHashChanged = () => {
        console.log('Hash changed');
    };

    window.addEventListener("hashchange", onHashChanged);

    return () => {
        window.removeEventListener("hashchange", onHashChanged);
    };
}, []);

edited Sep 27 '21 at 11:03

answered Sep 27 '21 at 10:33

juliomalves

42,130
20
150
146

1

Thanks @juliomalves, I cannot use since all of my html comes from database – Appu Rajendran Sep 27 '21 at 10:51
I will update the question – Appu Rajendran Sep 27 '21 at 10:52
Without the events are not triggered in my app – Appu Rajendran Sep 27 '21 at 10:56
1

If you want the events to be picked up by `next/router` then you need to use `next/link` or `next/router` for client-side navigations. Otherwise, you'll need to add an event listener for the `window`'s `hashchange` event. I'll update my answer. – juliomalves Sep 27 '21 at 10:59
1

Note that NextJS `hashChangeStart` Event does not account for browser refresh or navigation, see my answer below.. – piouson Jun 21 '22 at 11:33

piouson · Answer 2 · 2022-06-21T12:31:27.350

If you're relying on URL hash for multiple re-renders or state changes, note that NextJS hashChangeStart event does not account for browser refresh or direct browser URL address navigation

A complete solution might need a combination of event listeners to cover all edge cases.

const useUrlHash = (initialValue) => {
  const router = useRouter()
  const [hash, setHash] = useState(initialValue)

  const updateHash = (str) => {
    if (!str) return
    setHash(str.split('#')[1])
  }

  useEffect(() => {
    const onWindowHashChange = () => updateHash(window.location.hash)
    const onNextJSHashChange = (url) => updateHash(url)

    router.events.on('hashChangeStart', onNextJSHashChange)
    window.addEventListener('hashchange', onWindowHashChange)
    window.addEventListener('load', onWindowHashChange)
    return () => {
      router.events.off('hashChangeStart', onNextJSHashChange)
      window.removeEventListener('load', onWindowHashChange)
      window.removeEventListener('hashchange', onWindowHashChange)
    }
  }, [router.asPath, router.events])

  return hash
}

How to detect change in the URL hash in Next.js?

2 Answers2

Linked

Related