ReactJS中切换页面时动态修改头部背景颜色的问题

Ah, I totally get where you're coming from—this is a super common gotcha with single-page React apps! The issue here is that when you navigate between routes using React's client-side routing (like React Router), the browser doesn't actually refresh the page. That means your component doesn't re-render automatically, so the window.location.pathname check only runs once when the component first mounts (or when you manually refresh).

Let's walk through the easiest fixes depending on whether you're using a function component or class component:

Option 1: Function Component with useLocation (React Router v6+) #

If you're using React Router (which I assume you are for menu navigation), the useLocation hook is your best friend here. It updates every time the route changes, which triggers your component to re-render and update the background color.

Here's how to implement it:

import { useLocation } from 'react-router-dom';

function Header() {
  // Get the current location object, which updates on route change
  const location = useLocation();

  return (
    <header 
      style={{ 
        background: location.pathname === "/" ? "red" : "blue",
        padding: "1rem",
        color: "white"
      }}
    >
      {/* Use React Router's Link component for better SPA behavior */}
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </header>
  );
}

export default Header;

Option 2: Class Component with withRouter #

If you're still using class components, you can wrap your component with the withRouter higher-order component. It injects routing props (like location) into your component, which update when the route changes.

import React from 'react';
import { withRouter } from 'react-router-dom';

class Header extends React.Component {
  render() {
    const { location } = this.props;

    return (
      <header 
        style={{ 
          background: location.pathname === "/" ? "red" : "blue"
        }}
      >
        <nav>
          <a href="/">Home</a>
          <a href="/contact">Contact</a>
        </nav>
      </header>
    );
  }
}

// Wrap the component to access routing props
export default withRouter(Header);

Bonus: If You're Not Using React Router #

If you're handling navigation manually (without React Router), you'll need to track the route state yourself. Use a state variable and update it whenever a menu item is clicked, plus listen for browser history changes:

import { useState, useEffect } from 'react';

function Header() {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  // Handle back/forward button clicks
  useEffect(() => {
    const handlePopState = () => setCurrentPath(window.location.pathname);
    window.addEventListener('popstate', handlePopState);
    return () => window.removeEventListener('popstate', handlePopState);
  }, []);

  // Custom navigation function
  const navigateTo = (path) => {
    window.history.pushState({}, '', path);
    setCurrentPath(path);
  };

  return (
    <header style={{ background: currentPath === "/" ? "red" : "blue" }}>
      <nav>
        <button onClick={() => navigateTo("/")}>Home</button>
        <button onClick={() => navigateTo("/services")}>Services</button>
      </nav>
    </header>
  );
}

The core idea here is making sure your component reacts to route changes—either by leveraging React Router's built-in tools or manually tracking the route state.

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