如何在 React 中实现点击导航链接后自动关闭移动端侧边栏菜单

本文介绍在使用 react router 的响应式导航栏中，如何让移动端折叠菜单在用户点击任意导航链接后自动收起，避免需手动点击关闭按钮的体验问题。

在你当前的 Navbar 组件中，菜单的展开/收起状态完全依赖于 navRef.current.classList.toggle("responsive_nav")，且仅由两个按钮（菜单按钮和关闭按钮）触发。但当用户点击 跳转页面时，React Router 会完成路由切换，而 DOM 中的 .responsive_nav 类并不会被自动移除——因此菜单仍保持展开状态，影响移动端用户体验。

解决方案：为每个 添加点击回调，主动收起菜单。
由于 navRef 是组件内部的 useRef，我们不能直接在 JSX 中调用 showNavbar()（它只是 toggle），更推荐的做法是提取一个明确的 closeNavbar 方法，并在所有导航链接点击时调用它。

以下是优化后的完整代码（关键修改已加注释）：

import { useRef } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import "../Styles/main.css";
import { NavLink } from "react-router-dom";
import FacebookIcon from '@mui/icons-material/Facebook';
import InstagramIcon from '@mui/icons-material/Instagram';
import logo from "./img/logojobb.png";

function Navbar() {
    const navRef = useRef();

    // ✅ 明确分离「打开」和「关闭」逻辑，便于复用
    const showNavbar = () => {
        navRef.current?.classList.toggle("responsive_nav");
    };

    const closeNavbar = () => {
        // ✅ 确保只移除类，不切换（避免意外展开）
        navRef.current?.classList.remove("responsive_nav");
    };

    return (
        <header>
            @@##@@
            <nav ref={navRef}>
                {/* ✅ 为每个 NavLink 添加 onClick={closeNavbar} */}
                <NavLink 
                    to="/" 
                    onClick={closeNavbar}
                >
                    Kezdőlap
                </NavLink>
                <NavLink 
                    to="/courses" 
                    onClick={closeNavbar}
                >
                    Órák
                </NavLink>
                <NavLink 
                    to="/blog" 
                    onClick={closeNavbar}
                >
                    Blog
                </NavLink>
                <NavLink 
                    to="/rental" 
                    onClick={closeNavbar}
                >
                    Terem bérlés
                </NavLink>
                <NavLink 
                    to="/events" 
                    onClick={closeNavbar}
                >
                    Rendezvények
                </NavLink>
                <NavLink 
                    to="/contact" 
                    onClick={closeNavbar}
                >
                    Kapcsolat
                </NavLink>

                <a 
                    className="footersocial" 
                    href="https://www.facebook.com/julialaszlo.liafit/" 
                    target="_blank" 
                    rel="noreferrer"
                >
                    <FacebookIcon />
                </a>
                <a 
                    className="footersocial" 
                    href="https://www.instagram.com/liafit_movar/" 
                    target="_blank" 
                    rel="noreferrer"
                >
                    <InstagramIcon />
                </a>

                {/* ✅ 关闭按钮也使用 closeNavbar，行为统一 */}
                <button
                    className="nav-btn nav-close-btn"
                    onClick={closeNavbar}
                >
                    <FaTimes />
                </button>
            </nav>

            {/* ✅ 菜单按钮保持 toggle 行为 */}
            <button className="nav-btn" onClick={showNavbar}>
                <FaBars />
            </button>
        </header>
    );
}

export default Navbar;

✅ 关键改进说明：

Descript

一个多功能的音频和视频编辑引擎

下载

• 新增 closeNavbar() 函数，强制移除 .responsive_nav 类，确保菜单可靠收起；
• 所有 均绑定 onClick={closeNavbar} —— 路由跳转与菜单收起同步触发；
• 关闭按钮 () 也改用 closeNavbar，语义更清晰、行为更一致；
• 使用可选链 navRef.current?.classList... 防止 ref 尚未挂载时报错（增强健壮性）；
• 无需额外状态管理（如 useState），轻量高效，兼容函数组件生命周期。

⚠️ 注意事项：

• 此方案适用于客户端路由（React Router v6+）。若项目中存在服务端跳转（如 ），请统一替换为 或为其单独添加 onClick={closeNavbar}；
• 若使用了 useNavigate 自定义跳转逻辑，同样应在调用前插入 closeNavbar()；
• CSS 中需确保 .responsive_nav 类具备正确的媒体查询与过渡效果（例如 max-height: 0; overflow: hidden; transition: max-height 0.3s ease;），否则视觉收起可能不自然。

通过以上改造，用户点击任意导航项后，菜单将立即平滑收起，大幅提升移动端交互一致性与专业感。