Next.js 13+ App Router 不再提供 Router.events，但可通过 React 的 useTransition + useRouter 自定义 Link 组件，结合加载状态（isPending）实现页面跳转时的进度指示效果。
next.js 13+ app router 不再提供 `router.events`，但可通过 react 的 `usetransition` + `userouter` 自定义 link 组件，结合加载状态（`ispending`）实现页面跳转时的进度指示效果。
在 Next.js 的 App Router 中，传统的 next/router 事件监听机制（如 routeChangeStart、routeChangeComplete）已被移除，官方明确表示 目前没有直接等价于 Router.events 的 API。这是因为 App Router 基于 React Server Components 和 React 18 的并发特性（Concurrent Features），所有客户端导航均通过 React Transitions 驱动——这意味着我们应转向声明式、基于状态的加载控制，而非事件钩子。
✅ 推荐方案：使用 useTransition 实现导航加载态
核心思路是：封装 <link> 组件，在点击时触发 transition，并利用 isPending 状态控制 UI（如进度条、骨架屏或加载文案）。以下是一个生产就绪的示例：
// app/components/ProgressLink.tsx
'use client';
import { useTransition } from 'react';
import Link from 'next/link';
import { useRouter } from 'next/navigation';
export function ProgressLink({
href,
children,
replace = false,
className,
...props
}: Omit<react.componentprops link>, 'href'> & {
href: string;
replace?: boolean;
}) {
const router = useRouter();
const [isPending, startTransition] = useTransition();
return (
<link href="%7Bhref%7D" onclick="{(e)"> {
e.preventDefault();
startTransition(() => {
if (replace) {
router.replace(href);
} else {
router.push(href);
}
});
}}
className={`${className} ${isPending ? 'opacity-75 pointer-events-none' : ''}`}
{...props}
>
{isPending ? '→ Loading...' : children}
);
}</react.componentprops>
✅ 使用方式：
<progresslink href="/dashboard">Go to Dashboard</progresslink>
? 进阶：集成 NProgress（类原生体验）
若你希望复刻传统 NProgress 的顶部进度条效果，可结合 useEffect 监听 isPending 变化（注意：需在客户端组件中操作 DOM）：
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
// app/components/NProgressLink.tsx
'use client';
import { useEffect, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; // 确保引入样式
NProgress.configure({ showSpinner: false, minimum: 0.3 });
export function NProgressLink({
href,
children,
replace = false,
}: {
href: string;
children: React.ReactNode;
replace?: boolean;
}) {
const router = useRouter();
const [isPending, startTransition] = useTransition();
useEffect(() => {
if (isPending) {
NProgress.start();
} else {
NProgress.done();
}
}, [isPending]);
return (
<a href="%7Bhref%7D" onclick="{(e)"> {
e.preventDefault();
startTransition(() => {
if (replace) {
router.replace(href);
} else {
router.push(href);
}
});
}}
>
{children}
</a>
);
}
⚠️ 注意事项：
-
useTransition仅适用于客户端组件（必须加'use client'）； -
isPending是瞬时状态，仅在 transition 执行期间为true，不涵盖数据获取（如fetch）、服务端渲染或 Suspense fallback 时间——如需覆盖完整加载周期，建议配合loading.tsx或Suspense边界； - 不要滥用
router.push/replace：避免在服务端组件或未挂载的组件中调用； - 第三方库如
nextjs-progressloader提供开箱即用封装，适合快速落地，但自定义组件更可控、无额外依赖。
? 总结
App Router 的设计哲学是“状态驱动”而非“事件驱动”。虽然暂无 Router.events 的替代 API，但 useTransition + useRouter 已足够支撑绝大多数导航加载场景。与其模拟旧模式，不如拥抱新范式：用 isPending 控制 UI 反馈，用 loading.tsx 处理路由级骨架，用 Suspense 协调数据加载——三者协同，可构建更稳定、更符合 React 并发模型的用户体验。
