Next.js中_app.js配置的Loader加载组件无法遮盖底层页面如何解决

当前实现只是将Loader组件插入到页面内容之前，没有做底层内容的隐藏或者层级遮挡，所以滚动页面时依然可以看到下层的页面内容。

方案1：加载时直接不渲染底层页面（实现最简单） #

如果不需要保留底层页面的临时状态，直接在loading状态为真时只渲染Loader即可，同时补充路由切换失败的异常监听，避免加载屏永久显示：

import { useState, useEffect } from 'react'
import Router from 'next/router'

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

  useEffect(() => {
    const handleRouteStart = () => setLoading(true)
    const handleRouteEnd = () => setLoading(false)

    Router.events.on('routeChangeStart', handleRouteStart)
    Router.events.on('routeChangeComplete', handleRouteEnd)
    Router.events.on('routeChangeError', handleRouteEnd)

    // 组件卸载时解绑事件，避免内存泄漏
    return () => {
      Router.events.off('routeChangeStart', handleRouteStart)
      Router.events.off('routeChangeComplete', handleRouteEnd)
      Router.events.off('routeChangeError', handleRouteEnd)
    }
  }, [])

  return(
    <>
     {/* ..<Head> <meta> tags here.. */}
     {loading ? <Loader /> : <Component {...pageProps} />}
    </>
   )
}

方案2：给Loader加全屏遮罩（保留底层页面状态） #

如果需要保留底层页面的临时状态（比如未提交的表单内容），不需要卸载组件，可以给Loader组件加全屏固定定位样式，遮挡住下层内容：

给Loader组件添加样式： #

/* Loader组件根节点样式 */
.loader-container {
  position: fixed;
  inset: 0; /* 等价于top:0;left:0;right:0;bottom:0 */
  z-index: 9999; /* 确保层级高于所有页面元素 */
  background-color: #ffffff; /* 可替换为你的设计背景色，完全遮挡下层 */
  display: flex;
  align-items: center;
  justify-content: center;
}

Loader组件示例： #

function Loader() {
  return (
    <div className="loader-container">
      {/* 你的加载动画代码 */}
      <div className="loading-spinner"></div>
    </div>
  )
}

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