加载屏显示时如何隐藏/展示所有React组件？Next.js路由切换场景实现咨询

你当前的代码已经完成了路由切换状态的监听逻辑，仅需调整渲染逻辑+优化事件绑定即可实现需求，有两种常见实现方式：

方案1：条件渲染隐藏页面组件（完全不渲染其他组件） #

当loading状态为true时，仅输出加载屏组件，不渲染页面内容，修改后的代码如下：

import "tailwindcss/tailwind.css";
import "../styles/main.css";
import Router from "next/router";
import { useState, useEffect } from "react";
import Loader from "../components/Loader/Loader";

function MyApp({ Component, pageProps }) {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    // 绑定路由事件
    const handleStart = () => {
      console.log("Router change...");
      setLoading(true);
    };
    const handleComplete = () => {
      console.log("Router change completed");
      setLoading(false);
    };

    Router.events.on("routeChangeStart", handleStart);
    Router.events.on("routeChangeComplete", handleComplete);
    Router.events.on("routeChangeError", handleComplete); // 新增错误回调，避免加载失败一直显示加载屏

    // 组件卸载时解绑事件，防止内存泄漏
    return () => {
      Router.events.off("routeChangeStart", handleStart);
      Router.events.off("routeChangeComplete", handleComplete);
      Router.events.off("routeChangeError", handleComplete);
    };
  }, []);

  return (
    <>
      {loading ? (
        <Loader loadingbool={loading}/>
      ) : (
        <Component {...pageProps}/>
      )}
    </>
  );
}

export default MyApp;

注意：用useEffect包裹事件绑定逻辑，可避免页面多次渲染导致重复绑定事件的异常。

方案2：加载屏全屏覆盖（保留页面组件渲染，视觉上隐藏） #

如果不需要销毁页面组件，仅要视觉上完全遮挡其他内容，可以给Loader组件添加全屏固定定位样式，不需要调整渲染逻辑，Loader示例样式参考：

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff; /* 和站点背景色保持一致即可 */
  z-index: 99999; /* 确保层级高于所有页面组件 */
  display: flex;
  align-items: center;
  justify-content: center;
}

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