当我在我的 next.js (react) 应用程序上单击 link 时，浏览器的进度条不可见

Question

我正在开发一个应用程序，使用 Strapi 作为后端，Next.js 作为前端。

在我的前端有很多 link。它们都像下面这些例子一样“语法化”。问题是，在我的浏览器（台式机和移动设备）上，当我单击 link 时，它并未显示浏览器正在为页面充电，但该页面会在 2 秒后出现。这会让用户认为该网站无法正常工作。

我该如何纠正？如果 probress bar /circle 像这样显示就好了：

Circle progress bar exemple on another website

<Box key={sectionPart.id} mx={20} className={`button button-${sectionPart.style}`}>
    <Link href={sectionPart.url} >
        <Box as="a">
            {sectionPart.title}
        </Box>
    </Link>
</Box>

        //snipet of menu navigation
    

<Link key={retrieveLinkId(link)} /*href={link.url}*/ href="/">
                                                    
       <a  className={router.pathname === retrieveLinkUrl(link) ? 'active' : ''}>
             <Flex justifyContent="start" className="featured-content" >

                  {/*** featured content Image **/}
                <Box className="link-featured-image-container">
                   <Image className="link-featured-image" 
                          src={retrieveLinkFeatureImg(link)} 
                          width={120} 
                          height={120} 
                    />
                 </Box>

                  {/*** featured content title & button  ***/}
                  <Box className="featured-content-links">
                     <Flex justifyContent="start" alignItems="start">
                        <p className="dropdown-section-item-title"> 
                          {retrieveLinkLabel(link)}
                        </p>
                     </Flex>

                     <Flex className="dropdown-section-cta" alignItems="flex-end">
                        <p>
                          {retrieveLinkFeatureBtn(link)}
                        </p>
                      </Flex>
                  </Box>

              </Flex>
          </a>
       </Link>

谢谢！

Answer 1

您可以使用，Nprogress在路线导航期间有一个进度条。将下面的代码放在您的根应用程序文件中

import React from 'react';
import Router from 'next/router';
import App, { Container } from 'next/app';
import NProgress from 'nprogress';


Router.onRouteChangeStart = () => {
  NProgress.start();
};

Router.onRouteChangeComplete = () => {
  NProgress.done();
};

Router.onRouteChangeError = () => {
  // hanlde the rror
  NProgress.done();
};

如果您想向其添加更多功能，请参阅 NProgress 自述文件中的配置部分以获取更多配置

当我在我的 next.js (react) 应用程序上单击 link 时，浏览器的进度条不可见

Browser's progress bar not visible when I click on a link on my next.js (react) app

html

javascript

progress-bar

reactjs

next.js