ReactJS+Tailwind导航栏：点击Footer的Culture链接同步激活About项

问题场景 #

用ReactJS+Tailwind CSS搭建的网站中，Navbar和Footer为独立组件。Navbar包含Home、About、Contact三个菜单项，默认Home为红色激活状态；Footer的Company板块有Culture链接，跳转至Culture页面时需要将Navbar的About项设为激活状态。但当前从Contact页面点击Culture链接后，页面跳转至Culture，Navbar的激活项仍停留在Contact。

解决方案核心 #

不要用组件本地useState维护激活状态，而是基于当前路由路径动态判断激活项。因为从Footer跳转时不会触发Navbar的点击事件，本地state无法同步更新，而通过监听路由变化可以自动匹配对应的激活项。

具体实现步骤 #

1. 在Navbar组件中引入react-router-dom的useLocation钩子，用于获取当前路由路径
2. 建立路由路径与Navbar激活项的映射规则：
   • / → Home
   • /about → About
   • /culture → About（关联关系）
   • /contact → Contact
3. 根据当前路径计算出对应的激活项，替代原有的useState维护的状态
4. 移除原有的handleItemClick函数，无需手动设置激活状态

修改后的Navbar.jsx代码 #

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

const NavBar = () => {
  const location = useLocation();

  // 根据当前路径匹配激活项
  const getActiveItem = () => {
    switch (location.pathname) {
      case "/about":
      case "/culture":
        return "About";
      case "/contact":
        return "Contact";
      default:
        return "Home";
    }
  };

  const activeItem = getActiveItem();

  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="/"
              className={`text-black ${activeItem === "Home" && "font-bold text-red-600"}`}
            >
              Home
            </Link>
          </li>
          <li>
            <Link
              to="/about"
              className={`text-black ${activeItem === "About" && "font-bold text-red-600"}`}
            >
              About
            </Link>
          </li>
          <li>
            <Link
              to="/contact"
              className={`text-black ${activeItem === "Contact" && "font-bold text-red-600"}`}
            >
              Contact
            </Link>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default NavBar;

补充说明 #

• 现在无论通过Navbar菜单项还是Footer的Culture链接跳转，Navbar都会根据当前路由自动更新激活状态，完美解决不同组件跳转时的状态同步问题
• 如果后续需要新增关联路径，只需在getActiveItem的switch语句中添加对应规则即可，扩展性更强

内容的提问来源于stack exchange，提问作者EinStyn