如何在NextJS中更改路由时显示加载进度条？

我正在尝试在路由更改时添加加载指示器，并遇到了一些问题。

我按照next.js文档中描述的方式进行了设置，也尝试了这篇文章中的方法，但是加载进度条似乎没有显示出来，尽管在控制台中我可以看到加载和加载完成的路由。

_app.tsx

import { ThemeProvider } from '@mui/styles'
import type { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import React, { useEffect } from 'react'
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'
import { ReactQueryDevtools } from 'react-query/devtools'
import Layout from '../components/Layout'
import ContextProvider from '../contexts/ContextWrapper'
import '../public/nprogress.css'
import theme from '../src/theme'
import '../styles/globals.css'
function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = React.useState(() => new QueryClient())
  const router = useRouter()
  useEffect(() => {
    const handleStart = (url: string) => {
      console.log(`加载中: ${url}`)
      NProgress.start()
    }
    const handleStop = (url: string) => {
      console.log(`完成: ${url}`)
      NProgress.done()
    }
    router.events.on('routeChangeStart', handleStart)
    router.events.on('routeChangeComplete', handleStop)
    router.events.on('routeChangeError', handleStop)
    return () => {
      router.events.off('routeChangeStart', handleStart)
      router.events.off('routeChangeComplete', handleStop)
      router.events.off('routeChangeError', handleStop)
    }
  }, [router])
  return (
    
      
        
          
            
              
            
          
        
        
      
    
  )
}
export default MyApp

非常感谢您的帮助。