![](/img/trans.png)
[英]Why does changing app.js to app.tsx break my Next.js project?
[英]Why cant i implement NProgress in my Next.js App?
我想我已經遵循了實現 nprogress 包所需的所有步驟。 更改路線但 nprogress 未能這樣做時,會顯示加載欄。 我已經嘗試過使用來自 cdn.js 的樣式表的鏈接來實現其他方法,但它當時也不起作用。
import Loader from "../comps/Loader";
import Router from "next/router";
import NProgress from "nprogress";
import "../styles/globals.css";
import "../styles/nprogress.css";
const MyApp = ({ Component, pageProps }) => {
const [isLoading, setIsLoading] = useState(false);
Router.onRouteChangeStart = (url) => {
NProgress.start();
setIsLoading(true);
};
Router.onRouteChangeComplete = () => {
NProgress.done();
setIsLoading(false);
};
Router.onRouteChangeError = () => {
NProgress.done();
setIsLoading(false);
};
console.log(isLoading);
return (
<>
<ThemeProvider theme={theme}>
<Layout>
{isLoading ? <Loader></Loader> : <Component {...pageProps} />}
</Layout>
</ThemeProvider>
</>
);
};
export default MyApp;
我還創建了強制性的 css 文件
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #e91e63;
position: fixed;
z-index: 1031;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #29d, 0 0 5px #29d;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #29d;
border-left-color: #29d;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
為了讓NProgress
真正發揮作用,它必須知道路由正在發生變化,並擁有該特定路由的密鑰來處理組件安裝和動畫。 因此不需要對加載組件進行條件顯示, NProgress
在后台通過NProgress.start()
和NProgress.done()
進行。
_app.js
import Layout from '../components/Layout'; import '../styles/globals.css' import App from 'next/app' import NProgress from "nprogress" import Router, { useRouter } from "next/router" Router.onRouteChangeStart = url => { NProgress.start() } Router.onRouteChangeComplete = () => NProgress.done() Router.onRouteChangeError = () => NProgress.done() function MyApp({ Component, pageProps }) { const {route} = useRouter() return ( <Layout> <Component {...pageProps} key={route} /> </Layout> ); } export default MyApp
CSS
文件可以保持原樣。
還要記住,因為在大多數移動設備上都會有一個NProgress
無法自行覆蓋的本機路由加載動畫。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.