怎么在Next.js项目中制作自定义加载屏幕

这篇文章主要介绍了怎么在Next.js项目中制作自定义加载屏幕，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

 制作自定义加载屏幕组件

这部分完全取决于您以及您希望加载屏幕组件的外观。例如下面是我的加载组件：

import React from "react";import styles from "./Loading.module.css";function Loading(props) {
  return (<div className={props.loading ? styles.body_loading : styles.none}>  <divclassName={styles.lds_ellipsis}  ><div></div>        <div></div>        <div></div>        <div></div>      </div>    </div>  );}export default Loading;

加载组件的样式 (CSS)：

.body_loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;}.none {
  display: none;}.lds_ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;}.lds_ellipsis div {
  position: absolute;
  top: 33px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--orange);
  animation-timing-function: cubic-bezier(0, 1, 1, 0);}.lds_ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds_ellipsis1 0.6s infinite;}.lds_ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds_ellipsis2 0.6s infinite;}.lds_ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds_ellipsis2 0.6s infinite;}.lds_ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds_ellipsis3 0.6s infinite;}@keyframes lds_ellipsis1 {
  0% {transform: scale(0);
  }
  100% {transform: scale(1);
  }}@keyframes lds_ellipsis3 {
  0% {transform: scale(1);
  }
  100% {transform: scale(0);
  }}@keyframes lds_ellipsis2 {
  0% {transform: translate(0, 0);
  }
  100% {transform: translate(24px, 0);
  }}

因此，您已经成功地使用自定义样式构建了加载屏幕组件，现在是时候在每次路由更改时在 Web 应用程序上呈现它了。

为此，我们将借助 Next.js 路由器事件，您可以侦听 Next.js 路由器内部发生的不同事件。

以下是支持的事件列表：

routeChangeStart(url, { shallow }) - Fires when a route starts to changerouteChangeComplete(url, { shallow }) - Fires when a route changed completelyrouteChangeError(err, url, { shallow }) - Fires when there's an error when changing routes, or a route load is cancellederr.cancelled - Indicates if the navigation was cancelledbeforeHistoryChange(url, { shallow }) - Fires before changing the browser's historyhashChangeStart(url, { shallow }) - Fires when the hash will change but not the pagehashChangeComplete(url, { shallow }) - Fires when the hash has changed but not the page

有关这些事件和其他路由器方法的更多详细信息，您可以访问Next.js 官方文档

借助这些事件，您可以将加载屏幕组件添加到 app.js 中，看看如何：

首先导入{useState, useEffect}from "react"，{useRouter}from"next/router"和您的Loading组件。

import { useState, useEffect } from "react";import { useRouter } from "next/router";import Loading from "../components/Loading";

现在我们将loading使用useState钩子声明变量并使用它进行初始化false，我们将true在路由更改时将其设置为，并在路由更改完成后将其恢复为 false。

我们将把这个逻辑放在useEffecthook 中并设置router为它的依赖项。这意味着每次router更改useEffect钩子内的逻辑都会被执行。

function MyApp({ Component, pageProps }) {const router = useRouter();const [loading, setLoading] = useState(false);useEffect(() => {const handleStart = (url) => {  url !== router.pathname ? setLoading(true) : setLoading(false);};const handleComplete = (url) => setLoading(false);router.events.on("routeChangeStart", handleStart);router.events.on("routeChangeComplete", handleComplete);router.events.on("routeChangeError", handleComplete);
  }, [router]);
  return (<>  <Loading loading={loading} />            <Component {...pageProps} />    </>  );}export default MyApp;}

我们将通过loading变量为道具，以我们的Loading组件，以便随时loading为true Loading组件将已经class有display: block当它是false将有class有display: none。

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么在Next.js项目中制作自定义加载屏幕”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!