Мое меню навигационного бара снова не активнее после навигации на странице ⇐ Javascript

[Anonymous]

Всякий раз, когда я перейду на страницу Contact Us или о нас, я не могу снова перейти на другую страницу со этой страницы, если я не перезагружаю приложение или не вернусь на домашнюю страницу. Логотип, меню NAV и социальный значок вверху даже не покажут указатель курсора после первого щелчка, что означает, что он сломался. Логотип не вернет меня обратно на домашнюю страницу, курсор больше не покажет указатель на них.import React, { useState, useEffect } from "react";
import { NavLink, Link, useLocation } from "react-router-dom";
import Styles from "./Navbar.module.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faBarsStaggered, faTimes } from "@fortawesome/free-solid-svg-icons";
import {
faXTwitter,
faFacebookF,
faLinkedinIn,
faTiktok,
faInstagram,
} from "@fortawesome/free-brands-svg-icons";

function Navbar() {
const [menuOpen, setMenuOpen] = useState(false);
const location = useLocation();

const toggleMenu = () => {
setMenuOpen((prev) => !prev);
};

useEffect(() => {
setMenuOpen(false);
}, [location]);

return (




[img]{`${process.env.PUBLIC_URL}/Logo.svg`}
className={Styles.logo_img}
/>


{/* Hamburger Icon */}



className={`${Styles.nav_links} ${menuOpen ? Styles.show_menu : ""}`}
>

isActive ? `${Styles.link} ${Styles.active}` : Styles.link
}
>
Terms of Service


isActive ? `${Styles.link} ${Styles.active}` : Styles.link
}
>
Privacy Policy


isActive ? `${Styles.link} ${Styles.active}` : Styles.link
}
>
Contact Us










);
}

export default Navbar;

navbar.module.css
.navbar_content {
max-width: 90%;
margin: auto;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 10px;
}

.logo_img {
width: 120px;
height: auto;
}

.nav_links {
display: flex;
gap: 24px;
}

.link {
color: white;
text-decoration: none;
font-size: 20px;
font-weight: 600;
transition: color 0.3s ease;
}

.link:hover {
color: #b3b3b3;
}

.active {
color: #02d85b;
border-bottom: 2px solid #02d85b;
padding-bottom: 2px;
}

.social_icons {
display: flex;
background-color: #07070780;
width: 280px;
gap: 10px;
border-radius: 400px;
padding: 16px;
color: white;
justify-content: space-around;
}

.social_icon {
height: 20px;
width: 20px;
cursor: pointer;
}

.menu_icon {
display: none;
font-size: 28px;
color: white;
cursor: pointer;
}

@media (min-width: 769px) and (max-width: 1130px) {
.nav_links {
flex-direction: column;
align-items: flex-start;
gap: 15px;
margin-top: 15px;
}

.link {
margin-bottom: 10px;
}

}

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
.navbar {
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}

.menu_icon {
display: flex;
background-color: #07070780;
border-radius: 50%;
height: 60px;
width: 60px;
align-items: center;
align-content: center;
justify-content: center;
margin-top: 5px;

}

.nav_links {
width: 100%;
flex-direction: column;
align-items: flex-start;
background: rgba(0, 0, 0, 0.9);
padding: 20px 20px;
margin-top: 10px;
gap: 10px;
border-radius: 10px;

opacity: 0;
transform: translateY(-20px);
pointer-events: none;
transition: opacity 0.5s ease, transform 0.5s ease;
}

.show_menu {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}

.link {
margin-bottom: 30px;
}

.social_icons {
display: none;
}

.social_icons {
width: 100%;
margin-top: 10px;
justify-content: center;
}
.social_icon {
display: block;
margin-top: 10px;
}

@keyframes bounceDown {
0% {
transform: translateY(-20px);
}
60% {
transform: translateY(10px);
}
80% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}

}

home.js
import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet-async";
import Styles from "./Home.module.css";
import Navbar from "./Navbar";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faGooglePlay, faApple } from "@fortawesome/free-brands-svg-icons";

const images = ["/carousel1.png", "/carousel2.png", "/carousel3.png"];

function Home() {
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
const interval = setInterval(() => {
setCurrentIndex((prevIndex) =>
prevIndex === images.length - 1 ? 0 : prevIndex + 1
);
}, 7000);

return () => clearInterval(interval);
}, []);

return (


PushEat - No Stress, Just Great Food!




{" "}




{images.map((src, index) => (
[img]{src}
className={`${Styles.fade_image} ${
index === currentIndex ? Styles.visible : ""
}`}
/>
))}

{images.map((_, index) => (

))}






No Stress,

Just Great Food!




Download on Google Play



Download on App Store






{/*

Ready for the best food deals?

Scrolling through the exciting list of deals on Pusheat is so

much fun. Here are 3 steps to get the best food deals.

*/}

);
}

export default Home;

app.js
import { Routes, Route } from "react-router-dom";
import Layout from "./components/UI/Layout";
import Home from "./components/Home";
import Privacy from "./components/pages/Privacy";
import TermsService from "./components/pages/TermsService";
import ContactUs from "./components/pages/ContactUs";

function App() {
return (






);
}

export default App;

index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { HelmetProvider } from "react-helmet-async"; // ADD THIS
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(







);


Подробнее здесь: https://stackoverflow.com/questions/795 ... -to-a-page