React导航栏自动关闭问题：页面跳转时如何自动关闭导航栏？

有几种实用的方法可以解决这个问题，下面逐一说明：

方法1：给每个导航链接添加点击事件 #

直接在每个<NavLink>上绑定关闭导航栏的逻辑，点击跳转时触发关闭：

修改后的导航链接代码：

<NavLink to="/" onClick={showNavbar}>Kezdőlap</NavLink>
<NavLink to="/courses" onClick={showNavbar}>Órák</NavLink>
<NavLink to="/blog" onClick={showNavbar}>Blog</NavLink>
<NavLink to="/rental" onClick={showNavbar}>Terem bérlés</NavLink>
<NavLink to="/events" onClick={showNavbar}>Rendezvények</NavLink>
<NavLink to="/contact" onClick={showNavbar}>Kapcsolat</NavLink>

这种方式简单直接，适合导航项不多的场景。

方法2：封装可复用的导航链接组件 #

如果导航项较多，重复写点击事件太繁琐，可以封装一个自定义NavLink组件，把关闭逻辑内置：

// 导入原NavLink并重命名
import { NavLink as RRNavLink } from "react-router-dom";

const NavLink = ({ to, children, ...props }) => {
  const handleClick = () => {
    // 获取导航栏元素并关闭
    const navElement = document.querySelector('nav[ref]');
    if (navElement?.classList.contains('responsive_nav')) {
      navElement.classList.remove('responsive_nav');
    }
  };

  return (
    <RRNavLink to={to} onClick={handleClick} {...props}>
      {children}
    </RRNavLink>
  );
};

之后在Navbar组件里用这个自定义的NavLink替代原来的即可，所有导航项都会自动带关闭逻辑。

方法3：监听路由变化自动关闭（推荐） #

利用react-router-dom的useLocation钩子监听路由变化，只要路径切换就自动关闭导航栏，这种方式逻辑最统一，不需要修改任何导航链接：

首先补充导入依赖：

import { useRef, useEffect } from "react";
import { NavLink, useLocation } from "react-router-dom";

然后在Navbar组件中添加监听逻辑：

function Navbar() {
    const navRef = useRef();
    // 获取当前路由信息
    const location = useLocation();

    const showNavbar = () => {
        navRef.current.classList.toggle("responsive_nav");
    };

    // 路由变化时触发关闭
    useEffect(() => {
        if (navRef.current?.classList.contains('responsive_nav')) {
            navRef.current.classList.remove('responsive_nav');
        }
    }, [location.pathname]);

    // 原return代码保持不变
}

完整的Navbar代码如下：

import { useRef, useEffect } from "react";
import { FaBars, FaTimes } from "react-icons/fa";
import "../Styles/main.css";
import { NavLink, useLocation } 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 location = useLocation();

    const showNavbar = () => {
        navRef.current.classList.toggle("responsive_nav");
    };

    useEffect(() => {
        // 路由切换时自动关闭导航栏
        if (navRef.current?.classList.contains('responsive_nav')) {
            navRef.current.classList.remove('responsive_nav');
        }
    }, [location.pathname]);

    return (
        <header>
            <img src={logo} alt="logo" style={{
                height: 'inherit',
            }}/>
            <nav ref={navRef}>
                <NavLink to="/">Kezdőlap</NavLink>
                <NavLink to="/courses">Órák</NavLink>
                <NavLink to="/blog">Blog</NavLink>
                <NavLink to="/rental">Terem bérlés</NavLink>
                <NavLink to="/events">Rendezvények</NavLink>
                <NavLink to="/contact">Kapcsolat</NavLink> 
                <a className="footersocial" href="https://www.facebook.com/julialaszlo.liafit/" target="_blank" rel="noreferrer"><FacebookIcon></FacebookIcon></a>
                <a className="footersocial" href="https://www.instagram.com/liafit_movar/" target="_blank" rel="noreferrer"><InstagramIcon></InstagramIcon></a>                 
                <button
                    className="nav-btn nav-close-btn"
                    onClick={showNavbar}>
                    <FaTimes />
                </button>
            </nav>
            <button className="nav-btn" onClick={showNavbar}>
                <FaBars />
            </button>
        </header>
    );
}
export default Navbar;

这种方法不管是通过导航点击还是其他方式跳转页面，导航栏都会自动关闭，体验更流畅。

内容的提问来源于stack exchange，提问作者Péter Nagy