在next js 14客户端组件中创建routeChangeStart和routeChangeComplete路由器事件

Question

我有一个下一个js v14.0.4项目。我正在尝试将顶部加载程序进度条与 NProgress 包应用于 Link 或 router.push() 发生的每个路由更改。但handleRouteChangeStart 和handleRouteChangeComplete 函数永远不会触发。我认为问题出在 Router.events.on('routeChangeStart',handleRouteChangeStart) 和 Router.events.on('routeChangeComplete',handleRouteChangeComplete) 上，但我不知道如何替换它们。

'use client';
import React, { useEffect } from 'react';
import { Router } from 'next/router';
import NProgress from 'nprogress'; // Import NProgress
import 'nprogress/nprogress.css'; // Import NProgress styles
import { usePathname } from 'next/navigation';

const TopLoader: React.FC = () => {
const pathname = usePathname();

useEffect(() => {
 const handleRouteChangeStart = (url: string) => {
   console.log(`Route change started: ${url}`);
   // Execute custom logic here on route change start
   NProgress.start();
 };

 const handleRouteChangeComplete = (url: string) => {
   console.log(`Route change completed: ${url}`);
   NProgress.done();
   // Execute custom logic here on route change complete
 };

 // Listen to route change start
 Router.events.on('routeChangeStart', handleRouteChangeStart);

 // Listen to route change complete
 Router.events.on('routeChangeComplete', handleRouteChangeComplete);

 return () => {
   // Clean up event listeners when the component unmounts
   Router.events.off('routeChangeStart', handleRouteChangeStart);
   Router.events.off('routeChangeComplete', handleRouteChangeComplete);
 };
}, [pathname]); // Only re-run effect if pathname changes

useEffect(() => {
 // Clean up NProgress on component unmount
 return () => {
   NProgress.remove();
 };
}, []);

return null;
};

export default TopLoader;

Answer 1

首先，在 NextJs 应用程序路由器中，您应该使用

next/navigation

中的路由器，而不是

next/router

目录中的路由器。也就是说，

pages

路由器不再支持路由器事件，但您肯定可以使用 NProgress 库来实现应用程序路由器的加载进度，我自己也实现了该库并提供了一些参考。我试图找到参考资料，但找不到，但您仍然可以在此处查看我的

代码

。 一些解释：

在实现中，我们为

app
• 钩子和

  useRouter

  组件创建一个包装器以支持加载进度。现在，您可以使用这些包装器，而不是从

  Link

  导入。我没有安装 nprogress 包，而是复制了它的内容并从那里使用。 - 确保复制
next/navigation
• 文件夹内的所有文件以使其正常工作，并确保将

  custom-router

  文件内的

  HandleOnComplete

  添加到根布局。
留下评论以了解后续问题。