對于我的情況，如果改變了頁面，加載螢屏就會顯示出來。
例如：
http://localhost:3000/ ----> http://localhost:3000/fr
加載螢屏將在頁面轉換時顯示
我想隱藏其他組件。
我想隱藏其他組件。我怎樣才能做到這一點？
import "tailwindcss/tailwind.css"/span>。
import "./styles/main.css"。
import Router from "next/router" 。
import { useState } from "react";
import Loader from "./components/Loader"。
function MyApp({ Component, pageProps }) {
const [loading, setloading] = useState(false)。
Router.events。 on("routeChangeStart", (url) => {
//檢查路由器改變的開始。
console.log("Router change...") 。
setloading（true）。
});
Router.events。 on("routeChangeComplete", (url) => {
//檢查路由器的變化完成。
console.log("router change completed")。
setloading（false）。
});
return (
<>/span>
<Loader loadingbool={loading}/>
<Component {...pageProps}/>
</>
);
}
export default MyApp;
uj5u.com熱心網友回復：
你可以在你的JSX中添加一些條件，這些條件取決于loading
return (
<> {loading ?
<> {loading ? <Loader loadingbool={loading}/>/span> : <Component {. ...pageProps}/>}。
</>}。
);
uj5u.com熱心網友回復：
通過使用boolen運算式，我們可以隱藏螢屏資料
。 。 return (
<> {loading ?
<> {loading ? <Loader loadingbool={loading}/>/span> : <Component {. ...資料}/>}。
</>
);轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/322734.html
標籤：