I want to close my hamburger menu using ReactJS hooks. When using a href in Vanilla JS it works fine because the webiste reloads, but in React the site dosn't reloads and my hamburger menu dosn't closes. I want my hamburger menu to close without having to reload my page. How can I close the hamburger menu when clicking on a link without reloading my page (using React hooks)?

import React from "react";
    import { FaGithub } from "react-icons/fa";
    import { Link } from "react-router-dom";
    
    const NavBar = () => {
      return (
        <>
          <div className="navbar-container">
            <div className="container">
              <nav>
                <input type="checkbox" id="nav" className="hidden" />
                <label htmlFor="nav" className="nav-btn">
                  <i></i>
                  <i></i>
                </label>
                <div className="logo">
                  <Link to="/">Logo</Link>
                </div>
                <div className="nav-wrapper">
                  <ul>
                    <li className="nav-item">
                      <Link to="/">Work</Link>
                    </li>
                    <li className="nav-item">
                      <Link style={{ textDecoration: "none" }} to="/contact">
                        contact
                      </Link>
                    </li>
                    <li className="nav-item">
                      <Link
                        to="https://github.com/"
                        target="_blank"
                        rel="noreferrer"
                      >
                        <FaGithub />
                      </Link>
                    </li>
                  </ul>
                </div>
              </nav>
            </div>
          </div>
        </>
      );
    };
    
    export default NavBar;

CSS:

    .navbar-container {
      margin-bottom: 7rem;
      position: relative;
    }
    
    nav {
      padding: 1.5rem 2rem;
    }
    
    .logo {
      float: left;
      margin-left: 1rem;
      margin-top: 0.5rem;
    }
    
    * .logo a {
      letter-spacing: 0px;
      text-decoration: none;
      color: black;
      font-size: 2rem;
      font-family: "Oswald", sans-serif;
    }
    
    nav ul {
      float: right;
    }
    
    nav ul li {
      display: inline-block;
      padding-top: 1rem;
    }
    
    nav ul li:not(:first-child) {
      margin-left: 48px;
    }
    
    nav ul li:last-child {
      margin-right: 24px;
    }
    
    nav ul li a {
      display: inline-block;
      outline: none;
      color: black;
      text-transform: uppercase;
      text-decoration: none;
      letter-spacing: 1.2px;
      font-family: "Oswald", sans-serif;
      margin-top: 3.5px;
    }
    
    @media screen and (max-width: 864px) {
      .logo {
        padding: 0;
        padding-top: 1rem;
      }
    
      .logo a {
        font-size: 1.5rem;
      }
    
      .nav-btn {
        padding-top: 1rem;
      }
    
      .nav-wrapper {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        background: #fff;
        opacity: 0;
      }
    
      .nav-wrapper ul {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
      }
    
      .nav-wrapper ul li {
        display: block;
        float: none;
        width: 100%;
        text-align: right;
        margin-bottom: 10px;
        text-align: center;
      }
    
      .nav-wrapper ul li:not(:first-child) {
        margin-left: 0;
      }
    
      .nav-wrapper ul li a {
        padding: 10px 24px;
        opacity: 0;
        color: #000;
        font-size: 18px;
        letter-spacing: 1.2px;
        transition: all 0.2s ease;
      }
    
      .nav-btn {
        position: fixed;
        right: 3rem;
        display: block;
        cursor: pointer;
        z-index: 9998;
      }
    
      .nav-btn i {
        display: block;
        width: 25px;
        height: 2px;
        background: black;
      }
    
      .nav-btn i:nth-child(1) {
        margin-top: 18px;
      }
    
      .nav-btn i:nth-child(2) {
        margin-top: 6px;
      }
    }
    
    @media screen and (max-width: 375px) {
      .nav-wrapper {
        width: 100%;
      }
    }
    
    #nav:checked   .nav-btn i {
      background: #000;
      transition: transform 0.2s ease;
    }
    
    #nav:checked   .nav-btn i:nth-child(1) {
      transform: translateY(3px) rotate(-135deg);
    }
    
    #nav:checked   .nav-btn i:nth-child(2) {
      transform: translateY(-5px) rotate(135deg);
    }
    
    #nav:checked ~ .nav-wrapper {
      z-index: 9990;
      opacity: 1;
    }
    
    #nav:checked ~ .nav-wrapper ul li a {
      opacity: 1;
      transform: translateX(0);
      font-size: 6vmin;
    }
    
    .hidden {
      display: none;
    }

CodePudding user response：

Doing it using basic JS :

first let's add ID to the navbar closing button

<label id="close-button" htmlFor="nav" className="nav-btn">

then let's trigger a function whenever a click occures on a link

<Link onClick={() => {document.getElementById("close-button").click()}} to="/">Work</Link>

Doing it with ReactJs hooks :

First let's import useState & useEffect

import React, {useState,useEffect} from "react";

then add :

const NavBar = () => {
  const [open , setOpen] = useState(true)

  useEffect(() => {
if (!open){
  document.getElementById("close-button").click()
}
  },[open]); ....

and to the navbar label :

<label onClick={()=> setOpen(true)} id="close-button" htmlFor="nav" className="nav-btn">

finally to the link :

<Link onClick={()=> setOpen(false)} to="/">Work</Link>

CodePudding user response：

You can create a custom Link component and use useLinkClickHandler to add onClick logic. See https://github.com/remix-run/react-router/blob/main/docs/api.md#uselinkclickhandler with provided example