如何将当前路由页面保存到状态中以实现头部条件样式？

你的问题在于之前的写法是直接在对象里执行setPage()，这会在组件初始化时就一次性调用所有的setPage，而且完全没有监听路由的变化——当用户切换页面时，状态不会自动更新，自然头部样式也不会跟着变。

下面是正确的实现方案，核心思路是监听路由变化，根据当前路由从映射表中匹配对应的样式，再更新状态：

完整实现代码 #

import { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import MainContext from './MainContext'; // 请替换成你的Context文件路径

const Layout = ({ children }) => {
  // 用更清晰的变量名表示头部样式
  const [headerStyle, setHeaderStyle] = useState("black");
  const router = useRouter();

  // 定义路由与头部样式的映射表，一目了然
  const ROUTE_TO_STYLE = {
    "/": "black",
    "/projects/project/[id]": "black",
    "/404": "black",
    "/booking": "black",
    "/teammembers": "black",
    "/projects": "white",
    "/singlecareers": "white",
    "/careers": "white",
    "/aboutus": "white",
    "/news": "white",
    "/news/[id]": "white",
  };

  // 监听路由路径变化，自动更新头部样式
  useEffect(() => {
    // 从映射表中获取当前路由对应的样式，找不到就用默认的black
    const matchedStyle = ROUTE_TO_STYLE[router.pathname] || "black";
    setHeaderStyle(matchedStyle);
  }, [router.pathname]); // 依赖项设为router.pathname，路由变化时触发更新

  const contextData = { headerStyle, setHeaderStyle };

  return (
    <MainContext.Provider value={contextData}>
      <Header />
      {children}
      <Footer />
    </MainContext.Provider>
  );
};

export default Layout;

在Header组件中使用样式 #

接下来在你的Header组件里，就可以通过Context拿到样式状态，动态设置类名或者内联样式了：

import { useContext } from 'react';
import MainContext from './MainContext';

const Header = () => {
  const { headerStyle } = useContext(MainContext);
  
  return (
    {/* 这里用类名举例，你也可以换成内联样式 */}
    <header className={`site-header ${headerStyle === 'black' ? 'header-black' : 'header-white'}`}>
      {/* 头部内容 */}
    </header>
  );
};

export default Header;

关键说明 #

1. 为什么用useEffect？：useEffect可以让我们在路由路径（router.pathname）变化时执行更新逻辑，确保每次路由切换都会同步更新头部样式状态。
2. 动态路由匹配：Next.js的router.pathname会准确识别动态路由（比如/news/[id]），所以映射表里的key直接写动态路由的格式就能匹配成功。
3. 默认值处理：如果有未在映射表里定义的路由，我们设置了默认值black，避免出现样式丢失的情况。

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