NextJS:如何使用加载组件代替nprogress? [英] NextJS: How can I use a loading component instead of nprogress?
问题描述
是否可以在NextJS中使用<Loading />组件代替nprogress?我认为您需要从路由器事件中访问一些高级道具，例如pageProps，以便您可以切换加载状态，然后有条件地输出加载组件，但是我看不到这样做的方法...
Is it possible to use a <Loading /> component in NextJS instead of nprogress? I'm thinking you would need to access some high level props like pageProps from the router events so you can toggle the loading state and then conditionally output a loading component but I don't see a way to do this...
例如
Router.events.on("routeChangeStart", (url, pageProps) => {
pageProps.loading = true;
});
和渲染中
const { Component, pageProps } = this.props;
return pageProps.loading ? <Loading /> : <Page />;
但是，当然，routeChangeStart不会传入pageProps.
But of course, routeChangeStart doesn't pass in pageProps.
推荐答案
是的，可以使用其他组件代替nProgress来处理加载.我有一个类似的问题，发现下面的解决方案可以为我解决.
Yes, it is possible to use another component to handle loading instead of nProgress. I had a similar question, and found the solution below working out for me.
在./pages/_app.js中执行所有这些操作是有意义的，因为根据文档， 可以帮助保持页面之间的布局和状态.您可以在生命周期方法componentDidMount上启动Router事件.重要的是要注意，_app.js只能安装一次，但是启动路由器事件仍然可以在这里进行.这将使您能够设置状态.
It makes sense to do all this in ./pages/_app.js, because according to the documentation that can help with persisting layout and state between pages. You can initiate the Router events on the lifecycle method componentDidMount. It's important to note that _app.js only mounts once, but initiating Router events will still work here. This will allow you to be able to set state.
以下是这一切如何结合在一起的一个示例:
Below is an example of how this all comes together:
import React, { Fragment } from 'react';
import App from 'next/app';
import Head from 'next/head';
import Router from 'next/router';
class MyApp extends App {
state = { isLoading: false }
componentDidMount() {
// Logging to prove _app.js only mounts once,
// but initializing router events here will also accomplishes
// goal of setting state on route change
console.log('MOUNT');
Router.events.on('routeChangeStart', () => {
this.setState({ isLoading: true });
});
Router.events.on('routeChangeComplete', () => {
this.setState({ isLoading: false });
});
Router.events.on('routeChangeError', () => {
this.setState({ isLoading: false });
});
}
render() {
const { Component, pageProps } = this.props;
const { isLoading } = this.state;
return (
<Fragment>
<Head>
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="utf-8" />
</Head>
{/* You could also pass isLoading state to Component and handle logic there */}
<Component {...pageProps} />
{isLoading && 'STRING OR LOADING COMPONENT HERE...'}
</Fragment>
);
}
}
MyApp.getInitialProps = async ({ Component, ctx }) => {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
};
export default MyApp;
这篇关于NextJS:如何使用加载组件代替nprogress?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
