如何 hide/show 显示加载屏幕时所有反应组件？

Question

就我而言，如果页面发生变化，加载屏幕将会出现。
例如：
http://localhost:3000/ ----> http://localhost:3000/fr
加载屏幕将显示页面转换

我想隐藏其他组件。我该怎么做？

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

function MyApp({ Component, pageProps }) {
  const [loading, setloading] = useState(false);
  Router.events.on("routeChangeStart", (url) => {
    // inspect the router changing start
    console.log("Router change...");
    setloading(true);
  });

  Router.events.on("routeChangeComplete", (url) => {
    // inspect the router changing complete
    console.log("Router change completed");
    setloading(false);
  });

  return (
    <>

      <Loader loadingbool={loading}/>
      <Component {...pageProps}/>
    </>
  );
}

export default MyApp;

Answer 1

您可以使用取决于 loading

值的三元在 JSX 中添加一些条件

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

如果你想让组件仍然被渲染，根据loading的值有条件地添加一个class（并使用.hidden隐藏与css。 )

  return (
    <>
      <Loader loadingbool={loading} {...(!loading && {className:'hidden'})} />
      <Component {...pageProps} {...(loading && {className:'hidden'})} />
    </>
  );

Answer 2

通过使用布尔表达式我们可以隐藏屏幕数据

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

如何 hide/show 显示加载屏幕时所有反应组件？

How to hide/show all react component when loading screen is showing up?

reactjs

next.js

tailwind-css