手动修改URL哈希后如何触发Next.js重新渲染？

问题原因 #

你的自定义hook未生效的核心原因是：Next.js的router.asPath不会主动监听手动修改URL哈希的操作。当你手动编辑哈希并按下回车时，浏览器仅更新地址栏的哈希部分，但Next.js路由系统默认不处理这种原生的哈希变化事件，因此router.asPath的值不会更新，依赖它的useEffect自然也不会触发。

最简单的修复方案 #

要保持URL为唯一数据源，同时在哈希变化时触发重新渲染，直接监听浏览器的hashchange事件，用一个虚拟状态触发组件重新执行即可：

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

function useUrlHash(): string | null {
  const router = useRouter();
  // 虚拟状态，仅用于触发重渲染
  const [_, setHashTrigger] = useState(0);

  useEffect(() => {
    const onHashChange = () => {
      // 更新状态值，强制组件重新执行
      setHashTrigger(prev => prev + 1);
    };

    window.addEventListener('hashchange', onHashChange);
    // 组件卸载时移除监听
    return () => window.removeEventListener('hashchange', onHashChange);
  }, []);

  if (!router.isReady) {
    return null;
  }

  // 直接从浏览器地址栏读取最新哈希，确保与URL完全一致
  return window.location.hash.slice(1) || null;
}

方案说明 #

1. 监听原生事件：hashchange事件会覆盖所有哈希变化场景，包括手动修改URL的情况，确保不会遗漏任何哈希更新。
2. 虚拟状态触发重渲染：每次哈希变化时更新一个无意义的状态值，迫使组件重新执行，从而读取最新的哈希值。
3. URL作为唯一数据源：始终直接从window.location读取哈希，无需在React状态中存储副本，避免数据不一致的问题。

若你坚持要使用router.asPath，也可以在hashchange事件中调用router.replace同步Next.js路由状态，但这会额外触发Next.js的路由逻辑，不如直接读取window.location简洁高效。

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