加载组件出现在页面顶部答案

【问题标题】：Loading component appears on top of the page加载组件出现在页面顶部
【发布时间】：2021-10-06 03:58:04
【问题描述】：

我在_app.js上使用加载器组件实现了加载屏幕

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

  Router.events.on('routeChangeStart', (url) => {
    setLoading(true)
  })
  Router.events.on('routeChangeComplete', (url) => {
    setLoading(false)
  })
  return(
    <>
     ..<Head> <meta> tags here..
     {loading && <Loader />}
       <Component {...pageProps} />;
    </>
   )
 }

问题是，虽然出现了loader组件<Loader/>，但是当我向下滚动时，还是可以看到<Component {...pageProps} />;代表的页面内容。这会破坏加载器组件的用途。我应该只在页面仍在渲染时看到加载器组件。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

也许你可以使用ternary operatorloading ? <Loader /> : <Component {...pageProps} />，所以当加载为真时将渲染Loader组件，否则当加载为假时将渲染Component。完整代码如下：

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

  Router.events.on('routeChangeStart', (url) => {
    setLoading(true)
  })
  Router.events.on('routeChangeComplete', (url) => {
    setLoading(false)
  })
  return(
    <>
     ..<Head> <meta> tags here..
     {loading ? <Loader /> : <Component {...pageProps} />}
    </>
   )
 }

【讨论】：

【解决方案2】：

您可以尝试组件的三元条件。检查如果 loading 为真，则显示 Loader 组件，否则显示 .

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

【讨论】：