如何在JSX中实现URL哈希变化时重新渲染map循环？

你的问题核心是：哈希（#id_name）变化时，组件没有感知到这个变化，导致map循环的判断逻辑没重新执行。因为Next.js的asPath不会在哈希变化时自动更新触发组件重渲染——哈希改变属于客户端路由的软变化，不会触发组件props更新。

解决方案步骤： #

• 把当前哈希值存在组件的状态中
• 监听哈希变化事件，更新状态以触发重渲染
• 用状态里的哈希值来做匹配判断

具体代码实现（Next.js环境）： #

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

export default function YourComponent({ entries }) {
  const router = useRouter();
  // 初始化哈希值，从当前URL获取
  const [currentHash, setCurrentHash] = useState(() => {
    return typeof window !== 'undefined' ? window.location.hash.slice(1) : '';
  });

  useEffect(() => {
    // 监听哈希变化事件
    const handleHashChange = () => {
      setCurrentHash(window.location.hash.slice(1));
    };

    window.addEventListener('hashchange', handleHashChange);
    // 清理监听
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  // 也可以用Next.js的路由事件监听，替代上面的原生监听
  // useEffect(() => {
  //   const handleRouteChange = () => {
  //     setCurrentHash(window.location.hash.slice(1));
  //   };
  //   router.events.on('routeChangeComplete', handleRouteChange);
  //   return () => router.events.off('routeChangeComplete', handleRouteChange);
  // }, [router.events]);

  return (
    <div>
      {entries.map((item, index) => {
        // 用状态里的currentHash做匹配
        if (currentHash === item.section)
          return (
            <div id={item.section} key={index}>
              <h3>{item.title}</h3>
              <p>{item.summary}</p>
            </div>
          );
      })}
    </div>
  );
}

关键说明： #

• 用useState保存当前哈希值，确保哈希变化时状态更新，触发组件重渲染
• 监听hashchange事件（或Next.js路由事件），实时同步最新哈希到状态
• 替换原来的asPath.endsWith判断，直接用状态中的哈希值和item.section对比，逻辑更简洁准确

这样处理后，点击侧边栏链接改变URL哈希时，组件会自动更新状态并重新执行map循环，渲染匹配的内容。

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