你能帮助我什么和在哪里我应该把关闭导航栏当我导航到其他页面？
只有当我点击关闭按钮时它才会关闭。
下面是我的代码导航栏：

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");
    };
    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;