点击页脚链接时，如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)

我正在开发一个ReactJS网站，它的样式是TailWind CSS，我在不同的组件中有一个导航栏和页脚.导航栏由三个菜单项组成:主页、关于和联系人.默认情况下，Home菜单项为红色，About和Contact项为黑色，表示我们在主页上.

当"Contact"菜单项被点击时，它变成红色，Home和About变成黑色，"Contact"内容加载，表明我们在联系人页面上.

现在，我在"公司"部分的页脚中有一个名为"文化"的链接.点击"文化"应该导航到显示其自身内容的文化页面.但是，我也希望它将导航栏中的活动菜单项更改为"大约"，以指示"文化"和"关于"之间的关系.

我正在寻找一种实现这一功能的方法.具体地说，我想知道如何在点击页脚中的"区域性"时更新导航栏中的活动菜单项，同时确保"区域性"仍然打开它自己的页面.

现在的问题是，如果我正在联系，而我点击页脚中的区域性，它会加载区域性页面，但导航指示器仍保持联系状态

任何实现这一点的帮助或代码示例都将不胜感激！

这是我的Navbar.jsx:

import React, {useState} from "react";
import {Link} from "react-router-dom";

const NavBar = () => {
  const [activeItem, setActiveItem] = useState("Home");

  const handleItemClick = (item) => {
    setActiveItem(item);
  };
  return (
    <nav className="bg-green-100 px-8 py-8 sm:pt-6 sm:pb-4 pb-5 mx-auto max-w-screen-xl lg:px-12 lg:py-12">
      <div>
        <ul className="flex space-x-12 justify-center">
          <li>
            <Link
              to="/"
              onClick={() => handleItemClick("Home")}
              className={`text-black ${
                activeItem === "Home" && "font-bold text-red-600"
              }`}>
              Home
            </Link>
          </li>
          <li>
            <Link
              to="/about"
              onClick={() => handleItemClick("About")}
              className={`text-black ${
                activeItem === "About" && "font-bold text-red-600"
              }`}>
              About
            </Link>
          </li>
          <li>
            <Link
              onClick={() => handleItemClick("Contact")}
              to="/contact"
              className={`text-black ${
                activeItem === "Contact" && "font-bold text-red-600"
              }`}>
              Contact
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default NavBar;

这是我的footer.jsx:

import React from "react";
import {Link} from "react-router-dom";

const Footer = () => {
  return (
    <footer className="bg-gray-200 px-4 py-4 sm:pt-6 sm:pb-4 pb-5 mx-auto max-w-screen-xl lg:px-8 lg:py-6">
      <div className="flex justify-between">
        <div>
          <h3 className="font-semibold text-gray-700">Company</h3>
          <ul className="flex space-x-4">
            <li>
              <Link to="/culture" className="text-gray-500">
                Culture
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </footer>
  );
};

export default Footer;

这是我的App.jsx:

import React from "react";
import {BrowserRouter, Route, Routes} from "react-router-dom";
import Navbar from "./components/Navbar";
import Footer from "./components/Footer";
import Home from "./page/Home";
import About from "./page/About";
import Culture from "./page/Culture";
import Contact from "./page/Contact";

const App = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/culture" element={<Culture />} />
      </Routes>
      <Footer />
    </BrowserRouter>
  );
};

export default App;