Next.js 14客户端组件路由变化事件不触发，NProgress加载条失效求助

你的代码里的Router.events无法触发，核心原因是Next.js 14的App Router不再兼容next/router中的事件监听API——这个API只针对旧版Pages Router设计。App Router提供了更简洁的isPending状态来判断路由加载状态，直接用它就能实现需求。

修改后的完整代码 #

'use client';
import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

const TopLoader: React.FC = () => {
  const router = useRouter();

  useEffect(() => {
    // 根据路由加载状态控制进度条
    router.isPending ? NProgress.start() : NProgress.done();
  }, [router.isPending]);

  // 组件卸载时清理进度条实例
  useEffect(() => {
    return () => NProgress.remove();
  }, []);

  return null;
};

export default TopLoader;

关键改动说明 #

• 替换next/router的Router为next/navigation的useRouter：这是App Router的官方导航API
• 用router.isPending替代路由事件：路由切换开始时isPending变为true，切换完成后变为false，精准匹配进度条的启动/结束时机
• 移除不必要的pathname依赖：isPending已经能直接反映路由状态变化，无需额外监听路径

使用方式 #

把这个TopLoader组件导入到你的根layout.tsx中，就能全局生效，不管是用Link组件还是router.push()触发的路由切换，都会自动显示顶部进度条。

内容的提问来源于stack exchange，提问作者elahe karami