如何使用 react（无引导程序）更改每个路由页面的背景颜色？答案

【问题标题】：How can I change the background colour with each route page using react (without bootstrap)?如何使用 react（无引导程序）更改每个路由页面的背景颜色？
【发布时间】：2021-02-06 20:39:53
【问题描述】：

我正在尝试更改路线页面的背景颜色，但遇到了一些困难。如果我使用常规 css 它只会改变 div 的背景颜色而不是整个页面？我的目标是让团队页面反映他们的团队颜色。

这是我的gitHub，提前感谢您的帮助。

一个

【问题讨论】：

标签： reactjs routes react-router background-color

【解决方案1】：

您首先需要将团队的颜色存储在某个位置。我认为 MenuItem.js 将是合适的地方。

MenuItems.js（更改路径值以呈现团队组件）

export const MenuItems = [
  {
    title: "Baby Zepps",
    path: "/teams/baby-zepps",
    cName: "dropdown-link",
    color: "green",
  },
  {
    title: "Bad Dog",
    path: "/teams/bad-dog",
    cName: "dropdown-link",
    color: "blue",
  },
];

现在不知何故，从下拉列表中选择团队时，您需要传递相应的值。团队单击时呈现的组件的团队颜色。由于团队下拉列表中的这些元素是 Link 组件，我们可以在这些 Link 组件中设置 state，这将帮助我们将数据传递给相应的组件。在此链接单击上呈现的组件。

在 Dropdown.js 中，

<Link
  className={item.cName}
  to={{
     pathname: item.path,
     state: {
       color: item.color,
     },
  }}
  onClick={() => setClick(false)}
>

所以，这个状态值是在 Link 组件中设置的。可以使用 Teams 组件访问

props.location.state.color

所以，在 Teams 组件中：

export default function Teams(props) {
  return (
    <div style={{backgroundColor: props.location.state.color}}>
      <h1>Hello from Teams</h1>
    </div>
  );
}

所以，浏览器中的组件是这样的：

【讨论】：