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 上启动路由器事件.重要的是要注意 _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屋！
