Блог

Как мы обнаруживаем изменение хэша URL-адреса Next.js проект?

Я не хочу перезагружать свою страницу каждый раз, когда пуля меняется.
Я не могу использовать, так как все мои данные поступают из БД
Пример: При нажатии на тег из
http://example/test#url1
Для
http://example.com/test#url2

Попробовал ниже, но это, похоже, работает только для изменения пути.

 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;
 

Вы можете прослушивать изменения хэша с помощью hashChangeStart события 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>
        </>
    );
};
 

Если вы не используете next/link или next/router не используете навигацию на стороне клиента (не рекомендуется в Next.js приложения), то вам нужно будет прослушать window hashchange событие.

Ваш useEffect будет выглядеть следующим образом.

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

    window.addEventListener("hashchange", onHashChanged);

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