页面路由更改时加载指示器不显示答案

【问题标题】：loading indicator does not show when the page route changes页面路由更改时加载指示器不显示
【发布时间】：2021-01-06 16:52:33
【问题描述】：

我正在使用Next.js 并创建了 3 个页面。

index.js
类别/index.js
类别/[slug].js

每当用户访问新页面时，我都想给予用户一些关注。为此，我添加了库名称NProgress，它在视口顶部显示了一条加载线。 NProgress的逻辑写在pages/_app.js文件里面。

_app.js:

import React from 'react';
import Router from 'next/router';
import NProgress from 'nprogress';

NProgress.configure({
  speed: 800,
  showSpinner: false,
});

Router.events.on('routeChangeStart', () => {
  NProgress.start();
});
Router.events.on('routeChangeComplete', () => NProgress.done());
Router.events.on('routeChangeError', () => NProgress.done());


function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

每当我更改路线并转到categories 页面时，加载线都可以正常工作。

但是当我通过单击重定向到categories/[slug].js 页面的任何categories 更改路线时。加载线会显示几秒钟，然后隐藏。

你可以看到它。

有没有办法解决这个问题？

pages/index.js:

import React from 'react';
import Link from 'next/link';

export default function Home() {
  return (
    <div>

        <Link href="/categories">
            <a>Categories</a>
        </Link>

      <Form>
        <Button />
      </Form>
    </div>
  );
}

pages/categories/index.js:

import React from 'react';
import Link from 'next/link';


export default function Categories() {
    return (
        <div>
            <div className="categories">
                <ul>
                    <li>
                        <Link href="/categories/wordpress" as="/categories/wordpress">
                            <a>Wordpress</a>
                        </Link>
                    </li>

                    <li>
                        <Link href="/categories/magento" as="/categories/magento">
                            <a>Magento</a>
                        </Link>
                    </li>

                    <li>
                        <Link href="/categories/drupal" as="/categories/drupal">
                            <a>Drupal</a>
                        </Link>
                    </li>

                    <li>
                        <Link href="/categories/shopify" as="/categories/shopify">
                            <a>Shopify</a>
                        </Link>
                    </li>
                </ul>
            </div>
        </div>
    );
}

pages/categories/[slug].js:

import React from 'react';

export default function CategoryPage(props) {

    const { slug } = props;
    return (
       <h1>Hello - { slug }</h1>
    );
}

CategoryPage.getInitialProps = async (context) => {
    const categorySlug = context.query.slug;
    return {
        slug: categorySlug
    };
};

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

第二次链接点击是导致页面硬重新加载的原因。当您第二次单击时，您可以在浏览器选项卡上看到旋转图标。

你能试着像这样定义你的链接吗？

<Link href='/categories/[slug]' as="/categories/wordpress">
  <a>wordpress</a>
</Link>

【讨论】：