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

Question

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

例如，

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

并在渲染中

const { Component, pageProps } = this.props;

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

但是当然， routeChangeStart不会传入 pageProps。

Answer 1

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

在./pages/_app.js完成所有这些是./pages/_app.js ，因为根据可以帮助在页面之间保持布局和状态的文档。 您可以在生命周期方法componentDidMount上启动 Router 事件。 需要注意的是_app.js只挂载一次，但启动 Router 事件在这里仍然有效。 这将使您能够设置状态。

以下是所有这些如何结合在一起的示例：

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;

Answer 2

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

import Router from 'next/router'
import { useState, useEffect } from 'react'

const useRouterLoading = () => {
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    const start = () => setLoading(true)
    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)
    }
  }, [])
  return loading
}

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

问题描述

2 个解决方案

解决方案1
8 2019-02-09 02:53:39

解决方案2
4 2020-09-05 15:21:25

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

问题描述

2 个解决方案

解决方案1 8 2019-02-09 02:53:39

解决方案2 4 2020-09-05 15:21:25

解决方案1
8 2019-02-09 02:53:39

解决方案2
4 2020-09-05 15:21:25