如何在React.js中结合useLocation与滚动事件实现从首页跳转至其他页面时修改导航栏背景色

看起来你需要让导航栏在跳转到 /product-listing 页面时，不管滚动位置如何都保持黑色背景，同时保留原有的滚动变色逻辑。我们可以通过结合路由位置和滚动状态来实现这个需求，具体修改如下：

修改后的完整代码 #

import React, { useState, useEffect } from "react";
import Loading from "../other/Loading";
import PageNotFound from "../other/PageNotFound";
import { NavLink, useLocation } from "react-router-dom";

const Header = () => {
  const [loading, setLoading] = useState(true);
  const [headerData, setHeaderData] = useState(null);
  const [bgBlack, setBgBlack] = useState("");
  const [border, setBorder] = useState("");
  const [textColor, setTextColor] = useState("");
  const location = useLocation();
  console.log(location.pathname);

  useEffect(() => {
    getHeaderData();
    
    // 合并路由判断和滚动逻辑的样式更新函数
    const updateHeaderStyles = () => {
      // 两种情况需要黑色背景：在商品列表页，或者滚动超过5px
      const shouldApplyBlackBg = location.pathname === "/product-listing" || window.scrollY > 5;
      
      if (shouldApplyBlackBg) {
        setBgBlack("bg-black");
        setBorder("border-bottom");
        setTextColor("text-white");
      } else {
        setBgBlack("");
        setBorder("");
        setTextColor("");
      }
    };

    // 初始化时立即执行一次，确保路由切换后样式正确
    updateHeaderStyles();
    // 添加滚动监听
    window.addEventListener("scroll", updateHeaderStyles);

    return () => {
      window.removeEventListener("scroll", updateHeaderStyles);
    };
  }, [location.pathname]); // 监听路由变化，路由切换时重新执行effect

  const getHeaderData = async () => {
    try {
      const response = await fetch("http://localhost:8000/navLinks");
      const data = await response.json();
      if (data) {
        setLoading(false);
        setHeaderData(data);
      } else {
        setHeaderData("DATA NOT FOUND");
      }
    } catch (err) {
      console.log("OOPS... SOMETHING WENT WRONG");
    }
  };

  if (loading) {
    return (
      <>
        <Loading loadingHeader="Loading Header" />
      </>
    );
  }

  return (
    <>
      {headerData ? (
        <header>
          <nav className={`navbar navbar-expand-lg navbar-light ${bgBlack} fixed-top`} >
            <div className="container">
              <div>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" >
                  <span className="text-white">
                    <i className="fa fa-bars"></i>
                  </span>
                </button>
              </div>
              <div className="order-lg-0">
                <NavLink className="navbar-brand" to="/">
                  <img width="50" src={headerData.logo.url} className="img-fluid" alt="" />
                </NavLink>
              </div>
              <div className="order-lg-2 d-lg-none">
                <span className="text-white d-flex" data-toggle="modal" data-target="#mobileCartModal" >
                  <span className="d-inline-block mr-1">
                    <i className="fa fa-shopping-cart"></i>
                  </span>
                  <span className="d-inline-block">0</span>
                </span>
              </div>
              <div className="collapse navbar-collapse order-lg-1" id="navbarSupportedContent" >
                <ul className="navbar-nav mr-auto px-3">
                  <li className="nav-item">
                    <NavLink className="nav-link" to="/product-listing" data-toggle="modal" data-target="#loginModal" >
                      Shop
                    </NavLink>
                  </li>
                  <li className="nav-item dropdown">
                    <a className="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >
                      Learn
                    </a>
                    <div className="dropdown-menu" aria-labelledby="navbarDropdown" >
                      <a className="dropdown-item" href="#"> Process </a>
                      <a className="dropdown-item" href="#"> About Us </a>
                      <a className="dropdown-item" href="#"> Blog </a>
                      <a className="dropdown-item" href="#"> News </a>
                      <a className="dropdown-item" href="#"> Beyond The Bottle </a>
                    </div>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#" data-toggle="modal" data-target="#loginModal" >
                      Login
                    </a>
                  </li>
                  <li className="nav-item">
                    <a className="nav-link" href="#" data-toggle="modal" data-target="#signupModal" >
                      Sign Up
                    </a>
                  </li>
                </ul>
                <form className="dvSearch my-2 my-lg-0 px-3 position-relative">
                  <input className={`form-control mr-sm-2 ${border}`} type="text" placeholder="Search" aria-label="Search" />
                  <button className="btn my-2 my-sm-0 position-absolute" type="submit" >
                    <i className={`fa fa-search ${textColor}`}></i>
                  </button>
                </form>
              </div>
            </div>
          </nav>
        </header>
      ) : (
        <PageNotFound />
      )}
    </>
  );
};

export default Header;

关键修改点说明 #

1. 合并样式更新逻辑：创建了 updateHeaderStyles 函数，同时判断两个条件：

   • 当前路由是否为 /product-listing
   • 页面滚动距离是否超过5px
     只要满足其中一个条件，就给导航栏应用黑色背景样式。

2. 监听路由变化：将 location.pathname 添加到 useEffect 的依赖数组中，这样当路由切换时（比如从首页跳转到商品列表页），会自动执行样式更新函数，确保页面加载时导航栏样式正确。

3. 初始化执行：在 useEffect 中初始化时就调用一次 updateHeaderStyles，避免路由切换后需要滚动才会触发样式变化的问题。

这样修改后，既保留了原有的滚动变色功能，又满足了商品列表页始终显示黑色导航栏的需求。

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