我们如何检测 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;
您可以使用hashChangeStart来自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's hashchangeevent。
您useEffect将如下所示。
useEffect(() => {
const onHashChanged = () => {
console.log('Hash changed');
};
window.addEventListener("hashchange", onHashChanged);
return () => {
window.removeEventListener("hashchange", onHashChanged);
};
}, []);