在 React 多页 Web 应用程序中为每个页面设置唯一的背景图像很困难

Question

我在尝试为 React 多页面 Web 应用程序中的不同页面设置唯一的背景图像时遇到了挑战。我的方法包括为每个页面创建单独的 CSS 文件，并将不同的背景图像应用于这些文件中 body 元素的 background-image 属性。但是，在导航到不同页面时，只有一张背景图像应用于所有页面，而不是每个页面都显示其指定的背景图像。

我已确保 CSS 文件正确导入并应用到各自的页面，并且我已验证 CSS 中指定了每个图像的正确路径。尽管如此，问题仍然存在，我无法弄清楚为什么背景图像没有按预期显示在每个页面上。

任何有关如何解决此问题并成功为 React 多页面 Web 应用程序中的不同页面设置唯一背景图像的见解或建议将不胜感激。谢谢你。

在尝试为我的 React 多页面 Web 应用程序中的不同页面设置唯一的背景图像时，我按照以下步骤操作：

1. 为每个页面创建单独的 CSS 文件。
2. 在每个 CSS 文件中使用 background-image 属性指定不同的背景图像。
3. 导入 CSS 文件并将其应用到相应的 React 组件/页面。

我期望的是，导航到每个页面时，相应 CSS 文件中指定的背景图像将应用于 body 元素，从而为每个页面显示唯一的背景图像。

但是，尽管遵循了这些步骤，我还是发现只有一张背景图像始终应用于所有页面，而不是每个页面都按预期显示其指定的背景图像。这个结果与我的预期相反，我正在寻求有关如何有效排查和解决此问题的指导。

Answer 1

您可以尝试创建一个钩子，基本上可以应用不同的背景 url 来更新正文。

示例：

useBackgroundImage.ts

import { useLayoutEffect } from "react";

export function useBackgroundImage(image: string) {
  useLayoutEffect(() => {
    document.body.style.backgroundImage = `url(${image})`;
  }, []);
}

Home.jsx

import { useBackgroundImage } from "./useBackgroundImage";

export function Home() {
  useBackgroundImage("./home.jpg");
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

关于.jsx

import { useBackgroundImage } from "./useBackgroundImage";

export function About() {
  useBackgroundImage("./about.jpg");
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}