在Next.js项目中如何检测URL hash变化且不触发页面重载？

原代码失效原因 #

你之前监听router.asPath的代码不生效，是因为Next.js路由系统默认仅在路径（pathname）、查询参数（query）变化时才会触发路由状态更新，hash变更属于纯浏览器端行为，不会触发useRouter的状态更新，因此不会触发副作用执行。

解决方案 #

直接监听浏览器原生hashchange事件即可，该方案不会触发页面重载，也不需要依赖<Link>组件，完全符合你的业务场景需求。

Pages Router 写法 #

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

const Test = () => {
    useEffect(() => {
        // hash变更处理逻辑
        const handleHashChange = () => {
            const currentHash = window.location.hash;
            console.log('当前hash为:', currentHash);
            // 此处编写你的业务逻辑，比如请求数据库拉取对应数据
        };

        // 组件挂载时先读取一次初始hash
        handleHashChange();

        // 注册hash变化监听
        window.addEventListener('hashchange', handleHashChange);

        // 组件卸载时移除监听，避免内存泄漏
        return () => {
            window.removeEventListener('hashchange', handleHashChange);
        };
    }, []);

    return <></>;
};

export default Test;

App Router（Next.js 13+）写法 #

'use client'; // 客户端组件必须添加该标识

import React, { useEffect } from 'react';

const Test = () => {
    useEffect(() => {
        const handleHashChange = () => {
            const currentHash = window.location.hash;
            console.log('当前hash为:', currentHash);
            // 此处编写你的业务逻辑
        };

        handleHashChange();
        window.addEventListener('hashchange', handleHashChange);
        return () => window.removeEventListener('hashchange', handleHashChange);
    }, []);

    return <></>;
};

export default Test;

内容的提问来源于stack exchange，提问作者Appu Rajendran