如何在Next.js中结合Redux实现路由切换时的加载屏功能

直接替换你的_app.js代码为以下内容即可同时兼容Redux接入和路由切换加载屏功能：

import React, { useState, useEffect } from "react"
import Router from "next/router"
import { wrapper } from "../redux/store"
import Layout from '../components/Layout';
import '../styles/globals.css'
import '../styles/media.css'

const MyApp = ({ Component, pageProps }) => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const start = () => {
      console.log("route change start");
      setLoading(true);
    };
    const end = () => {
      console.log("route change finished");
      setLoading(false);
    };
    Router.events.on("routeChangeStart", start);
    Router.events.on("routeChangeComplete", end);
    Router.events.on("routeChangeError", end);
    
    // 清理路由监听，避免内存泄漏
    return () => {
      Router.events.off("routeChangeStart", start);
      Router.events.off("routeChangeComplete", end);
      Router.events.off("routeChangeError", end);
    };
  }, []);

  return (
    <Layout>
      {loading ? (
        // 此处可替换为你自定义的加载屏组件
        <h1>Loading...</h1>
      ) : (
        <Component {...pageProps} />
      )}
    </Layout>
  );
};

export default wrapper.withRedux(MyApp);

注意事项 #

• 该方案仅适用于Next.js的Pages Router模式，如果你使用的是13+版本的App Router，需要改用next/navigation提供的usePathname和useSearchParams配合监听路径变化实现
• 你可以将<h1>Loading...</h1>替换为自定义的全局加载动画组件，实现更美观的加载效果
• 代码中已修正原示例里findished的拼写错误

内容的提问来源于stack exchange，提问作者Pooja