如何检测 Next.js 中 URL 散列的变化？

Question

我们如何检测 Next.js 项目的 URL 哈希值的变化？

我不想每次 slug 更改时都重新加载我的页面。
我无法使用，因为我所有的数据都来自 DB
示例： 单击来自
的标签时 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;

Answer 1

您可以使用来自 router.events 的 hashChangeStart 事件监听哈希变化。

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 event.

您的 useEffect 将如下所示。

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

    window.addEventListener("hashchange", onHashChanged);

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

如何检测 Next.js 中 URL 散列的变化？

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

url

reactjs

next.js

url-fragment