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

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

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

✅ 正确做法：在 NavLink 中添加 onClick 回调

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

修改你的

⚠️ 注意事项与增强建议

• 避免重复收起：showNavbar() 使用 toggle()，在菜单已关闭时点击无副作用，安全可靠；

• 外部链接处理： 标签（如社交图标）跳转站外，onClick={showNavbar} 仍有效，因 DOM 事件在跳转前触发；

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

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

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

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

✅ 总结

只需为每个 和需要收起的 标签添加 onClick={showNavbar}，即可在用户点击时立即关闭导航菜单，同时无缝完成路由跳转。这是轻量、可靠且符合 React 最佳实践的解决方案。