当页面路由改变时加载指示器不显示

Question

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

• 索引.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重定向到categories/[slug].js页面的任何更改路由时。加载线显示几秒钟，然后隐藏。

你可以看到。

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

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
    };
};

Answer 1

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

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

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