Javascript NextJS：如何使用加载组件而不是nprogress？_Javascript_Node.js_Reactjs_Next.js

Javascript NextJS：如何使用加载组件而不是nprogress？

javascript node.js reactjs next.js

Javascript NextJS：如何使用加载组件而不是nprogress？,javascript,node.js,reactjs,next.js,Javascript,Node.js,Reactjs,Next.js,是否可以在NextJS中使用组件而不是nprogress？我想你需要从路由器事件中访问一些高级道具，比如pageProps，这样你就可以切换加载状态，然后有条件地输出加载组件，但我看不到这样做的方法比如说, Router.events.on("routeChangeStart", (url, pageProps) => { pageProps.loading = true; }); 在渲染中 const { Component, pageProps } = this.props;

是否可以在NextJS中使用

组件而不是nprogress？我想你需要从路由器事件中访问一些高级道具，比如

pageProps

，这样你就可以切换加载状态，然后有条件地输出加载组件，但我看不到这样做的方法

比如说,

Router.events.on("routeChangeStart", (url, pageProps) => {
  pageProps.loading = true;
});

在渲染中

const { Component, pageProps } = this.props;

return pageProps.loading ? <Loading /> : <Page />;

const{Component，pageProps}=this.props；
返回pageProps.loading？：；

但是当然，

routeChangeStart

不会传入pageProps。

是的，可以使用另一个组件来处理加载而不是nProgress。我有一个类似的问题，并发现下面的解决方案适合我

在

/pages/_app.js

中执行所有这些操作是有意义的，因为这有助于在页面之间持久化布局和状态。您可以在生命周期方法

componentDidMount

上启动路由器事件。需要注意的是，

\u app.js

只装载一次，但启动路由器事件在这里仍然有效。这将允许您设置状态

下面是这一切如何结合在一起的示例：

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;

import React，{Fragment}来自'React'；
从“下一个/应用程序”导入应用程序；
从“下一个/头”导入头；
从“下一个/路由器”导入路由器；
类MyApp扩展了应用程序{
状态={isLoading:false}
componentDidMount（）{
//记录以证明_app.js只装载一次，
//但是在这里初始化路由器事件也可以完成
//设置路线更改状态的目标
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；
返回(
我的应用程序
{/*您还可以将isLoading状态传递给组件并在那里处理逻辑*/}
{正在加载&&“字符串或正在加载组件…”
);
}
}
MyApp.getInitialProps=异步（{Component，ctx}）=>{
让pageProps={}；
if（Component.getInitialProps）{
pageProps=等待组件.getInitialProps（ctx）；
}
返回{pageProps}；
};
导出默认MyApp；

使用下面的钩子检查路由器的加载状态：

从“下一个/路由器”导入路由器
从“react”导入{useState，useEffect}
const useRouterLoading=（）=>{
常量[loading，setLoading]=useState（false）
useffect（（）=>{
const start=（）=>setLoading（真）
const end=（）=>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）
}
}, [])
回装
}

这是一个非常好的解决方案@duan。也许可以扩展它以显示错误和错误状态？比如：