如何高亮处于激活状态的Fragment导航链接？

因为URL的fragment（#后的部分）不会随HTTP请求发送到服务器，所以服务端的router无法获取该值，必须在客户端处理激活状态。以下是几种可行方案：

方案一：客户端监听hash变化（React/Next.js场景） #

在组件挂载后，通过window.location.hash获取当前锚点，并监听hashchange事件来更新激活状态：

import { useState, useEffect } from 'react';
import Link from 'next/link';

const NavLink = ({ href, children }) => {
  const [isActive, setIsActive] = useState(false);

  useEffect(() => {
    // 定义更新激活状态的函数
    const updateActiveState = () => {
      setIsActive(window.location.hash === href);
    };

    // 初始加载时执行一次
    updateActiveState();
    // 监听hash变化事件
    window.addEventListener('hashchange', updateActiveState);

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

  return (
    <Link href={href}>
      <a className={isActive ? styles.active : ''}>
        {children}
      </a>
    </Link>
  );
};

// 使用示例
<NavLink href="#section_dev">Development</NavLink>

方案二：纯CSS实现（无需JS） #

利用CSS的:target伪类，当页面中的锚点元素被激活时，给对应的导航链接设置样式。需要注意DOM结构的关联性：

假设你的页面结构如下：

<!-- 板块元素 -->
<section id="section_dev" class="page-section">Development内容</section>

<!-- 导航栏 -->
<nav class="nav">
  <a href="#section_dev" class="nav-link">Development</a>
</nav>

可以这样写CSS：

/* 当section_dev被激活时，选中对应的导航链接 */
.page-section:target ~ .nav .nav-link[href="#section_dev"] {
  color: #165DFF;
  font-weight: 600;
  border-bottom: 2px solid #165DFF;
}

注意：:target伪类依赖板块元素在导航元素之前的DOM结构，或者可以通过其他层级选择器调整，灵活性稍弱但无需JS。

核心原因说明 #

浏览器在发送HTTP请求时，会自动忽略URL中的fragment部分，所以服务端无法获取该值，所有涉及fragment的逻辑都只能在客户端浏览器环境中执行。

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