如何在 Next JS 13 中使用类似 NProgress 的进度条显示路由更改过渡？

Question

在 Next JS < 13 中，我们router.events可以_app.js添加类似的效果

import { useRouter } from 'next/router'
import NProgress from 'nprogress'

const Main = ({ Component, pageProps }) => {
    const router = useRouter()

    useEffect(function nprogressOnRouteChange() {
        router.events.on('routeChangeStart', NProgress.start)
        router.events.on('routeChangeError', NProgress.done)
        router.events.on('routeChangeComplete', NProgress.done)

        return () => {
            router.events.off('routeChangeStart', NProgress.start)
            router.events.off('routeChangeError', NProgress.done)
            router.events.off('routeChangeComplete', NProgress.done)

            NProgress.remove()
        }
    }, [])

    ...
}

但现在useRouter已移至next/navigation，并且钩子返回的对象中不再具有任何事件属性，我是否遗漏了什么？

尝试在新文件中导入Router，但事件也不起作用next/routerlayout.tsx

import Router from 'next/router'
export default function Transition({ children }) {
    useEffect(() => {
        Router.events.on('routeChangeStart', () => {
            console.log('start')
        })
    }, [])

    ...
}

Answer 1

//this worked for me, hope it helps!
//so you turn it on when you leave the page, and off when you land on another page

import { useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

export default async function Home() {
const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    NProgress.done();
    return () => {
      NProgress.start();
    };
  }, [pathname, searchParams]);

  return (
    <>
     ...
    </>
  )
}