Javascript 更改ReactJS中其他页面的标题背景色

我有以下代码

我想知道的是，当我点击“主页”菜单时，背景应该变为红色，而在其他情况下则变为蓝色

我写

    style={{background: window.location.pathname == "/" ? "red" : "blue"}}

但它只有在我刷新浏览器时才起作用。

考虑使用

useLocation

允许您通过执行以下操作获取当前路径：

let location = useLocation();
console.log(location.pathname);

因此，将Navigation.js更改为以下内容可以解决您的问题：

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

const Navigation = () => (
  <nav
    style={{
      background: useLocation().pathname !== "/" ? "red" : "blue"
    }}
  >
    <ul>
      <li>
        <NavLink exact activeClassName="active" to="/">
          Home
        </NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="active" to="/about">
          About
        </NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="active" to="/contact">
          Contact
        </NavLink>
      </li>
    </ul>
  </nav>
);

export default Navigation;

从“React”导入React；
从“react router dom”导入{NavLink，useLocation}；
常量导航=（）=>(


家


关于


接触


);
导出默认导航；

---

您可以看到实际的更改。

一个选项是声明新样式并使用状态变量分配它们

在.css文件中

.blue {
  background: blue;
}

.red {
  background: red;
}

然后按如下方式使用

import React, {useState} from "react";
import { NavLink } from "react-router-dom";

const Navigation = (props) => {
  
  const [sitestyle, setStyle] = useState("blue");

  return(
  <nav className={sitestyle}>
    <ul>
      <li>
        <NavLink exact activeClassName="active" to="/">
          Home
        </NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="active" to="/about" onClick={() => {setStyle("red")}}>
          About
        </NavLink>
      </li>
      <li>
        <NavLink exact activeClassName="active" to="/contact">
          Contact
        </NavLink>
      </li>
    </ul>
  </nav>
)
  };

export default Navigation;

import React，{useState}来自“React”；
从“react router dom”导入{NavLink}；
常量导航=（道具）=>{
常量[sitestyle，setStyle]=使用状态（“蓝色”）；
返回(


家


{setStyle（“红色”）}}>
关于


接触


)
};
导出默认导航；