个人中心
gpt4 book ai didi

javascript - NextJS : How can I use a loading component instead of nprogress?

转载 作者：行者123 更新时间：2023-12-01 15:55:50 26 4
gpt4 key购买 nike

是否可以使用 <Loading /> NextJS 中的组件而不是 nprogress？我认为您需要访问一些高级 Prop ，例如 pageProps从路由器事件中，因此您可以切换加载状态，然后有条件地输出加载组件，但我看不到这样做的方法...

例如，

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

并在渲染中 
const { Component, pageProps } = this.props;

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

当然， routeChangeStart不传入 pageProps。

最佳答案

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

在 ./pages/_app.js 中做这一切是有意义的, 因为 according to the documentation这可以帮助在页面之间保持布局和状态。您可以在生命周期方法 componentDidMount 上启动路由器事件.需要注意的是 _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;

关于javascript - NextJS : How can I use a loading component instead of nprogress?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54312927/

26 4 0
文章推荐： javascript - Typeorm选择具有特定列的最大值
文章推荐： javascript - 使用 Mapbox gl js 将悬停时的弹出窗口添加到自定义标记
文章推荐： javascript - "Module not found"将 Nuxtjs 应用程序部署到 Netlify 时出错
文章推荐： ios - 在同一项目中使用私有(private) Pod 和公共(public) Pod
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com