在安装组件之前反应改变主体 class

Question

我有一个登录组件，安装后主体必须如下所示。

<body class="login-page">

我正在使用 useEffect 挂钩设置 class 名称，如下所示：

useEffect(
    () => {
        document.body.className = "login-page";
    },
    [],
    () => {
        document.body.className = "";
    }
);

用户成功登录后，他们将被重定向到仪表板组件。上面设置的bodyclass必须在dashboard组件挂载前移除。上面的 useEffect 正在执行此操作，但用户必须先刷新页面才能看到仪表板组件的正确布局。

如何在用户登录后删除主体 class 以便仪表板组件的布局不受影响？

Answer 1

您的 useEffect 挂钩似乎有问题。应该像这样从 useEffect 返回清理。也许这可以解决您的问题？这应该在组件安装时设置主体的类名，然后在组件卸载时将其删除。

useEffect(() => {
  document.body.className = "login-page";
  
  return () => {
    document.body.className = "";
  }
}, []);

编辑：如果这不能解决您的问题，您应该仔细检查组件是否确实正在卸载。

React changing body class before component is mounted