如何隐藏/显示所有的反应组件时，加载屏幕显示?

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

您可以在JSX中添加一些条件，这些条件取决于loading的值

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

---

如果你想让组件仍然被渲染，有条件地添加一个依赖于loading值的类(并使用.hidden隐藏css)

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

Answer 2

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

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