Question

当我在Nextjs应用程序中更改路线时，例如/ home-> / about，我正在尝试实现加载屏幕。

我当前的实现如下。我将初始加载状态设置为false，然后在 componentDidMount 上进行更改。我还调用了 componentDidMount 中的 Router.events.on 函数，以在路由更改开始时更改加载状态。

_em._app.js 在页面文件夹中

class MyApp extends App {
  constructor(props) {
    super(props);
    this.state = {
      loaded: false,
    };
  }

  componentDidMount() {
    this.setState({ loaded: true });
    Router.events.on('routeChangeStart', () => this.setState({ loaded: false }));
    Router.events.on('routeChangeComplete', () => this.setState({ loaded: true }));
  }



  render() {
    const { Component, pageProps } = this.props;

    const { loaded } = this.state;

    const visibleStyle = {
      display: '',
      transition: 'display 3s',
    };
    const inVisibleStyle = {
      display: 'none',
      transition: 'display 3s',
    };
    return (
      <Container>
        <>
          <span style={loaded ? inVisibleStyle : visibleStyle}>
            <Loader />
          </span>
          <span style={loaded ? visibleStyle : inVisibleStyle}>
            <Component {...pageProps} />
          </span>
        </>
      </Container>
    );
  }
}

这很好用，但我觉得可能有更好的解决方案，更优雅的解决方案。这是实现此加载功能的唯一简便方法，还是有替代方法？

Answer 1

使用NProgress进行的新更新：

import Router from 'next/router'
import Link from 'next/link'
import Head from 'next/head'
import NProgress from 'nprogress'

Router.events.on('routeChangeStart', (url) => {
  console.log(`Loading: ${url}`)
  NProgress.start()
})
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())

export default function App({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* Import CSS for nprogress */}
        <link rel="stylesheet" type="text/css" href="/nprogress.css" />
      </Head>
      <Component {...pageProps} />
    </>
  )
}

如果您使用Tailwind CSS，请从以下位置复制代码：https://unpkg.com/nprogress@0.2.0/nprogress.css并将代码粘贴到全局CSS文件中。

如果要禁用微调器，请在_app.tsx/jsx文件中添加以下代码，并从CSS中删除微调器样式。

NProgress.configure({ showSpinner: false });

源链接：

Answer 2

使用新的hook API，这就是我要做的。.

function Loading() {
    const router = useRouter();

    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const handleStart = (url) => (url !== router.pathname) && setLoading(true);
        const handleComplete = (url) => (url !== router.pathname) && setLoading(false);

        router.events.on('routeChangeStart', handleStart)
        router.events.on('routeChangeComplete', handleComplete)
        router.events.on('routeChangeError', handleComplete)

        return () => {
            router.events.off('routeChangeStart', handleStart)
            router.events.off('routeChangeComplete', handleComplete)
            router.events.off('routeChangeError', handleComplete)
        }
    })

    return loading && (<div>Loading....{/*I have an animation here*/}</div>);
}

现在，<Loading/>将在路线更改时显示... 我使用react-spring对此进行了动画处理，但是您可以使用任何喜欢的库来做到这一点。

您甚至可以更进一步，并通过修改获取handleStart的{{1}}和handleComplete方法来修改显示组件时的内容。

Answer 3

为什么不使用[k1][k2]中的nprogress

_app.js

链接到nprogress。

您还需要包括样式文件。如果将css文件放在import React from 'react'; import Router from 'next/router'; import App, { Container } from 'next/app'; import NProgress from 'nprogress'; NProgress.configure({ showSpinner: publicRuntimeConfig.NProgressShowSpinner }); Router.onRouteChangeStart = () => { // console.log('onRouteChnageStart triggered'); NProgress.start(); }; Router.onRouteChangeComplete = () => { // console.log('onRouteChnageComplete triggered'); NProgress.done(); }; Router.onRouteChangeError = () => { // console.log('onRouteChnageError triggered'); NProgress.done(); }; export default class MyApp extends App { ... }目录中，则可以按以下方式访问样式：

static

确保CSS在所有页面中都可用...

它将适用于所有更改的路线。

下次js页面转换时正在加载屏幕

3 个答案: