如何在Next.js中使用redux集成路由更改的加载屏幕

Question

我试图添加加载屏幕每当一个URL变化检测，所以我试图把这段代码在我的_app.js文件

import Router from "next/router";
export default function App({ Component, pageProps }) {
const [loading, setLoading] = React.useState(false);
React.useEffect(() => {
const start = () => {
console.log("start");
setLoading(true);
};
const end = () => {
console.log("findished");
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 (
<>
{loading ? (
<h1>Loading...</h1>
) : (
<Component {...pageProps} />
)}
</>
);
}

但问题是我无法吸引redux。

我当前的Redux代码是这样的:

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

const MyApp = ({ Component, pageProps }) =>(
<Layout>
<Component {...pageProps} />
</Layout>
);
export default wrapper.withRedux(MyApp);

有人能帮帮我吗?

Answer 1

//Loading Component 
const Loading = ()=>{
return (
<div> Loading gif here </div>
)
}
const App = ()=>{
const [currentPathname, setCurrentPathname] = useState<string>('');
const router = useRouter();
const [loading, setLoading] = useState<boolean>(false);
useEffect(() => {
if (router.isReady) {
if (router.pathname !== currentPathname) {
setLoading(true);
setCurrentPathname(router.pathname);
setTimeout(() => {
setLoading(false);
}, 3000);
}
}
}, [router, router.pathname]);
return (
<Layout>
{loading && <Loading />}
<Component {...pageProps} />
</Layout>
)
}

我假设你有加载组件与某种加载gif。我只是在我的下一个应用程序中检查这个解决方案。在useEffect中，只是检查当前路径名是否不相同，然后将加载状态设置为true以启用加载组件。启用后，在本地状态中设置当前路径名，并使用设置超时函数在几秒钟后停止加载。例如，你会注意到我在3秒后改变加载状态