将默认图像作为 nextjs 的加载屏幕

Question

我想让我的背景作为下一个 js 中页面转换之间的加载屏幕。目前我有一个 Loader.js 文件来存储我的图像：-

import styles from './layout.module.css'

export default function Loader(){
    return(
        <div className={styles.loaderContainer}>
            <img src="../uploads/bg1080x1920.jpg" />
            <div>Loading ...</div> 
        </div>
    )

在我的 _app.js 中，我使用 next/router 来处理 routeChangeStart 和 routeChangeComplete 事件：

import {useState} from "react";
import { useRouter } from "next/router";
import Loader from "../components/Loader"

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)
  router.events.on("routeChangeStart", (url) => {
    console.log("Route is changing");
    setLoading(true)
  });
  router.events.on("routeChangeComplete", (url) => {
    console.log("Route is changed");
    setLoading(false)
  });

  return (
    <>
    {loading && <Loader />}
    <Component {...pageProps} />;
    </>
  );
}

但是当我尝试切换到另一个页面时，我无法从我的 routeChangeStart 和 routeChangeComplete 事件中获取任何控制台日志。

Answer 1

在 Next.js examples 中，事件注册始终在 useEffect 挂钩内。我建议你像这样修改你的代码：

import {useState, useEfffect} from "react";
import { useRouter } from "next/router";
import Loader from "../components/Loader"

export default function App({ Component, pageProps }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)

  useEffect(() => { //<-- this useEffect will be triggered just one time at component initialization
      router.events.on("routeChangeStart", (url) => {
         console.log("Route is changing");
         setLoading(true)
      });
      router.events.on("routeChangeComplete", (url) => {
         console.log("Route is changed");
         setLoading(false)
      });
  }, []);
  
  return (
    <>
    {loading && <Loader />}
    <Component {...pageProps} />;
    </>
  );
}