如何在 React Router 导航时自动收起响应式导航栏-html教程-PHP中文网

如何在 React Router 导航时自动收起响应式导航栏

本文教你为基于 `react-router-dom` 的响应式 navbar 添加“点击路由链接后自动关闭”功能，解决移动端菜单点击链接不收起的问题，无需手动点击关闭按钮。

在你当前的 Navbar 组件中，导航栏通过 useRef 控制 .responsive_nav 类的切换实现展开/收起，但点击仅触发路由跳转，不会主动调用 showNavbar() 关闭菜单。要实现“点击即关闭”，关键是在每个被点击时同步触发菜单收起逻辑。

由于 NavLink 是 React 组件（非原生标签），不能直接写 onclick 属性，而应使用 onClick 事件处理器，并在其中调用 showNavbar() —— 注意：这会先收起菜单，再完成路由跳转（react-router-dom 的导航是异步但无阻塞的，体验流畅）。

修改你的


  
    Kezdőlap
  
  
    Órák
  
  
    Blog
  
  
    Terem bérlés
  
  
    Rendezvények
  
  
    Kapcsolat
  

  {/* 社交图标链接也建议收起（可选） */}

避免重复收起：showNavbar() 使用 toggle()，在菜单已关闭时点击无副作用，安全可靠；
外部链接处理：标签（如社交图标）跳转站外，onClick={showNavbar} 仍有效，因 DOM 事件在跳转前触发；

豆绘AI
豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

下载
键盘/屏幕阅读器友好性：若需支持 Enter 或 Space 键激活，NavLink 默认已支持（依赖其内部行为），无需额外处理；

进阶优化（推荐）：将收起逻辑抽离为独立函数（如 closeNavbar），提升语义清晰度：

const closeNavbar = () => {
  navRef.current?.classList.remove("responsive_nav");
};
// 然后所有 onClick={closeNavbar}

路由监听方案（替代思路）：若项目复杂（如含编程式导航 navigate()），可结合 useLocation + useEffect 监听路径变化自动关闭，但对当前场景属过度设计。