ReactJS中CSS样式异常：Body样式跨路由组件残留问题

问题核心原因很明确：当你在组件中引入直接修改body的全局CSS时，这些样式会被添加到页面的全局样式表中。React路由切换只是卸载组件，并不会自动移除已加载的全局CSS规则，所以body的背景样式会一直保留；而直接在新标签页访问页面时，浏览器会重新加载所有资源，全局样式表重置，因此显示正常。

下面是几种实用的解决方法：

方案1：利用Effect钩子在组件卸载时清除样式 #

在Welcome组件的卸载阶段，手动重置body的相关样式，对应你在CSS中设置的属性逐一还原：

import React, { useEffect } from 'react';
import { Link } from "react-router-dom";
import './assets/css/style/welcome.css';

function Welcome() {
    useEffect(() => {
        // 组件挂载时CSS已生效，无需额外操作
        return () => {
            // 组件卸载时重置body样式
            document.body.style.backgroundImage = 'none';
            document.body.style.backgroundRepeat = 'unset';
        };
    }, []);

    return (
        <>
            <h1>Welcome !</h1>
            <Link to="/contact-us">Contact Us</Link>
        </>
    );
}

export default Welcome;

方案2：通过类名控制body样式，避免直接全局修改 #

把body的样式封装成类名，组件挂载时为body添加类，卸载时移除类，这样样式的生命周期和组件绑定：

修改welcome.css：

.welcome-body {
  background-image: linear-gradient(310deg, #1b2753, #836538);
  background-repeat: no-repeat;
}

修改Welcome.js：

import React, { useEffect } from 'react';
import { Link } from "react-router-dom";
import './assets/css/style/welcome.css';

function Welcome() {
    useEffect(() => {
        document.body.classList.add('welcome-body');
        return () => {
            document.body.classList.remove('welcome-body');
        };
    }, []);

    return (
        <>
            <h1>Welcome !</h1>
            <Link to="/contact-us">Contact Us</Link>
        </>
    );
}

export default Welcome;

这种方式扩展性更强，后续其他页面需要修改body样式时，只需添加对应的类名并在组件中处理即可。

方案3：使用CSS-in-JS自动管理全局样式生命周期 #

如果项目使用Styled Components这类CSS-in-JS方案，可以直接创建全局样式组件，它会在组件卸载时自动移除对应的样式规则：

import React from 'react';
import { Link } from "react-router-dom";
import { createGlobalStyle } from 'styled-components';

const WelcomeGlobalStyle = createGlobalStyle`
  body {
    background-image: linear-gradient(310deg, #1b2753, #836538);
    background-repeat: no-repeat;
  }
`;

function Welcome() {
    return (
        <>
            <WelcomeGlobalStyle />
            <h1>Welcome !</h1>
            <Link to="/contact-us">Contact Us</Link>
        </>
    );
}

export default Welcome;

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