本文介绍在 react 中实现响应式导航栏下划线效果的核心方案：通过复用同一更新函数处理路由切换和窗口缩放事件，并在缩放期间临时禁用 css 过渡，确保下划线始终精准对齐当前激活的导航项。
本文介绍在 react 中实现响应式导航栏下划线效果的核心方案：通过复用同一更新函数处理路由切换和窗口缩放事件，并在缩放期间临时禁用 css 过渡，确保下划线始终精准对齐当前激活的导航项。
在构建现代单页应用（SPA）时，导航栏下的动态高亮下划线是常见且重要的用户体验细节。但当页面响应式布局随窗口尺寸变化而重排时，若下划线仅依赖初始渲染定位，就会出现错位问题——正如你截图中所示：缩放后下划线“漂移”到错误位置。
根本原因在于：原代码将 resize 事件监听器绑定为 handleResize() 的执行结果（即立即调用），而非函数引用；同时 useEffect 依赖项中使用了 width.current（一个 ref 值），这违反了 React 依赖数组规范（ref 不应出现在依赖项中），导致 effect 不会正确响应 resize。
✅ 正确解法是：定义一个统一的 updateUnderline 函数，在路由变更时立即执行，在窗口缩放时也作为事件处理器被调用。关键优化点包括：
- ✅ 复用逻辑：避免重复查询 DOM 和计算位置；
- ✅ 动态禁用过渡：利用
evt参数判断是否为 resize 事件，缩放中临时设置transition: 'none'，防止视觉抖动或延迟对齐； - ✅ 精简依赖项：
useEffect仅依赖pathname，符合数据流逻辑（下划线位置只随当前路由变化）； - ✅ 安全 DOM 查询：保留对多
#home锚点的容错处理（如hasAttribute("id")判断 + 显式#home选择）。
以下是优化后的完整组件代码：
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
export default function Underline() {
const pathname = useLocation().pathname;
const [underlineStyle, setUnderlineStyle] = useState<React.CSSProperties | undefined>();
useEffect(() => {
const updateUnderline = (evt?: Event) => {
let underlinedLink = document.querySelector<HTMLAnchorElement>(`a[href="${pathname}"]`);
// 容错：若匹配到带 id 的链接（如多个 #home），强制取 #home 元素
if (underlinedLink?.hasAttribute("id")) {
underlinedLink = document.querySelector<HTMLAnchorElement>("#home");
}
if (!underlinedLink) return; // 防止空引用异常
const rect = underlinedLink.getBoundingClientRect();
const navRect = underlinedLink.closest("nav")?.getBoundingClientRect() || rect;
setUnderlineStyle({
width: `${underlinedLink.offsetWidth}px`,
left: `${rect.left - navRect.left}px`, // 相对于父容器（如 nav）的 left 值更鲁棒
transition: evt ? 'none' : 'left 0.3s ease-in-out, width 0.3s ease-in-out',
});
};
// 初始化定位
updateUnderline();
// 绑定 resize 监听器（传入函数引用，非调用）
window.addEventListener("resize", updateUnderline);
// 清理
return () => {
window.removeEventListener("resize", updateUnderline);
};
}, [pathname]); // ✅ 仅依赖 pathname，语义清晰
return <div id="underline" style={underlineStyle}></div>;
}? 配套 CSS 建议（增强健壮性）：
#underline {
position: absolute;
bottom: 0;
height: 4px;
background: linear-gradient(to bottom, #48a0e0 20%, #2b58a5);
box-shadow: 0 -14px 14px #48a0e0;
/* 注意：务必确保父容器（如 nav）设置了 position: relative */
}⚠️ 重要注意事项：
- 确保
<div id="underline"> 的<strong>直接父容器（通常是 nav）设置了 <code>position: relative，否则position: absolute的left值将相对于视口而非导航栏，缩放时仍可能错位； - 使用
getBoundingClientRect()计算left时，建议减去父容器的left值（如示例中rect.left - navRect.left），以获得相对于父容器的偏移，大幅提升响应式稳定性； - 避免在
useEffect依赖项中写ref.current—— ref 是可变对象，其值变化不会触发 effect 重执行，反而可能导致 stale closure 问题； - 若项目已采用
ResizeObserver（更现代、性能更优），可进一步替换window.resize，但对本场景而言，resize事件已足够简洁高效。
该方案兼顾简洁性与健壮性：无需重构 DOM 结构（如将下划线嵌入每个 <a></a> 内），也不依赖第三方库，纯 React + 原生 API 即可实现像素级精准对齐。
