下一个 js 页面转换时的加载屏幕 [英] Loading Screen on next js page transition
问题描述
我正在尝试在我的 Nextjs 应用程序中更改路由时实现加载屏幕,例如/home ->/about.
I am trying to implement a loading screen when changing routes in my Nextjs app ,for example /home -> /about.
我目前的实现如下.我将初始加载状态设置为 false,然后在 componentDidMount 上对其进行更改.我还在 componentDidMount 中调用 Router.events.on 函数来更改路由更改开始时的加载状态.
My current implementation is as follows. I am setting the initial loaded state to false and then changing it on componentDidMount. I am also calling the Router.events.on function inside componentDidMount to change the loading state when the route change starts.
_app.js在页面文件夹中
_app.js in pages folder
class MyApp extends App {
constructor(props) {
super(props);
this.state = {
loaded: false,
};
}
componentDidMount() {
this.setState({ loaded: true });
Router.events.on('routeChangeStart', () => this.setState({ loaded: false }));
Router.events.on('routeChangeComplete', () => this.setState({ loaded: true }));
}
render() {
const { Component, pageProps } = this.props;
const { loaded } = this.state;
const visibleStyle = {
display: '',
transition: 'display 3s',
};
const inVisibleStyle = {
display: 'none',
transition: 'display 3s',
};
return (
<Container>
<>
<span style={loaded ? inVisibleStyle : visibleStyle}>
<Loader />
</span>
<span style={loaded ? visibleStyle : inVisibleStyle}>
<Component {...pageProps} />
</span>
</>
</Container>
);
}
}
这工作得很好,但我觉得可能有更好的解决方案更优雅的解决方案.这是实现此加载功能不麻烦的唯一方法还是有替代方法?
This works perfectly fine but I feel like there may be a better solution more elegant solution. Is this the only way which isn't cumbersome to implement this loading feature or is there an alternative ?
推荐答案
为什么不使用 nprogress
如下 _app.js
Why not use nprogress
as follows in _app.js
import React from 'react';
import Router from 'next/router';
import App, { Container } from 'next/app';
import NProgress from 'nprogress';
NProgress.configure({ showSpinner: publicRuntimeConfig.NProgressShowSpinner });
Router.onRouteChangeStart = () => {
// console.log('onRouteChangeStart triggered');
NProgress.start();
};
Router.onRouteChangeComplete = () => {
// console.log('onRouteChangeComplete triggered');
NProgress.done();
};
Router.onRouteChangeError = () => {
// console.log('onRouteChangeError triggered');
NProgress.done();
};
export default class MyApp extends App { ... }
链接到 nprogress.
您还需要包含样式文件.如果你把css文件放在static
目录下,那么你可以访问样式如下:
You also need to include style file as well. If you put the css file in static
directory, then you can access the style as follows:
<link rel="stylesheet" type="text/css" href="/static/css/nprogress.css" />
确保 CSS 在所有页面中都可用...
Make sure the CSS is available in all pages...
它适用于您所有更改的路线.
It will work for all your routes changing.
这篇关于下一个 js 页面转换时的加载屏幕的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!