单击页脚链接时如何更改 ReactJS 导航栏中的活动菜单项（使用 Tailwind CSS 样式）？

Question

我正在开发一个使用 Tailwind CSS 样式的 ReactJS 网站，并且我在单独的组件中有一个导航栏和页脚。导航栏由三个菜单项组成：“主页”、“关于”和“联系方式”。默认情况下，“主页”菜单项为红色，“关于”和“联系方式”项为黑色，表示我们位于主页上。

单击“联系人”菜单项时，它会变为红色，“主页”和“关于”变为黑色，并且加载“联系人”内容，表明我们位于“联系人”页面。

现在，我在“公司”部分下的页脚中有一个名为“文化”的链接。单击“文化”应导航至显示其自身内容的文化页面。不过，我还希望它将导航栏中的活动菜单项更改为“关于”，以表明“文化”和“关于”之间的关系。

我正在寻找一种方法来实现此功能。具体来说，我想知道如何在单击页脚中的“文化”时更新导航栏中的活动菜单项，同时确保“文化”仍然打开自己的页面。

现在的问题是，如果我处于“联系人”状态，并且单击页脚中的文化，它会加载文化页面，但导航指示器仍保留在“联系人”中

任何实现此功能的帮助或代码示例将不胜感激！

这是我的 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;

这是我的页脚.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;

Answer 1

您可以使用 useLocation 挂钩来做到这一点：

例如：

 const location = useLocation()
 const [activeItem, setActiveItem] = useState("Home");

 const sidebarActive = [
    {
      title: 'Home',
      route: '/home'
    },
    {
      title: 'contact',
      route: '/contact'
    },
    {
      title: 'About',
      route: '/about'
    },
    {
      title: 'About',
      route: '/culture'
    }
  ]
  
useEffect(() => {
    const headerText = sidebarActive.find((item) =>
      item.route.includes(location.pathname.split('/')[1])
    )
    console.log('in useEffect called', location.pathname, headerText)
    setActiveItem(headerText?.title)
  }, [location])