Next.js App Router中next/navigation替代Router.events实现导航进度条方法

App Router中没有和Pages Router里Router.events完全等价的API，但可以通过客户端组件的路由钩子和状态监听，实现和旧方案一致的加载进度条效果，以下是具体实现方式：

方法一：监听路由参数变化自动控制进度条 #

这种方式通过usePathname和useSearchParams钩子监听路由变化，自动触发进度条的开始与结束，适合全局场景。

1. 先安装NProgress依赖：

npm install nprogress
# 或
yarn add nprogress

2. 在根布局（app/layout.js）中添加以下代码（注意要标记为'use client'）：

'use client';

import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; // 引入默认样式，可自定义

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    // 路由开始变化时启动进度条
    NProgress.start();
    
    // 路由切换完成后结束进度条，这里用setTimeout兜底，也可结合组件挂载状态调整
    const cleanupTimer = setTimeout(() => {
      NProgress.done();
    }, 300);

    return () => {
      clearTimeout(cleanupTimer);
      NProgress.done(); // 路由切换取消时也结束进度条
    };
  }, [pathname, searchParams]);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

方法二：手动控制导航时的进度条 #

如果需要更精细的控制（比如只在特定导航行为中显示进度条），可以在自定义导航组件中手动触发进度条：

'use client';

import { useRouter } from 'next/navigation';
import NProgress from 'nprogress';

export default function CustomNavLink({ href, children }) {
  const router = useRouter();

  const handleNavigate = (e) => {
    e.preventDefault();
    // 点击导航时启动进度条
    NProgress.start();
    // 执行路由跳转
    router.push(href);
    // 跳转完成后结束进度条，可根据实际加载时长调整超时时间
    setTimeout(() => {
      NProgress.done();
    }, 500);
  };

  return (
    <a href={href} onClick={handleNavigate}>
      {children}
    </a>
  );
}

补充说明 #

• 若项目中使用了服务器组件，路由切换时的加载状态可以结合loading.js文件配合使用，但进度条的控制仍需在客户端组件中完成。
• NProgress的样式可以通过修改CSS自定义，比如调整进度条颜色、高度等。

内容的提问来源于stack exchange，提问作者Islam Y-