17370845950

在 next.js 13.4 中，可通过在 `app/` 根目录下创建 `loading.js`（或 `loading.tsx`）文件，自动为所有嵌套路由提供中心化加载 ui，无需手动监听导航事件。

Next.js App Router 内置了基于 React Suspense 的加载状态机制，loading.js 是其核心约定之一。只需在 app/loading.js（或 app/loading.tsx）中定义一个 React 组件，Next.js 就会在任何客户端导航（如点击 、调用 router.push() 或浏览器前进/后退）触发页面切换时，自动渲染该组件作为过渡 UI，并在目标页面内容就绪后平滑替换。

✅ 正确用法示例（app/loading.js）：

export default function Loading() {
  return (
    
      
        
        
Loading...
      
    
  );
}

⚠️ 注意事项：

• loading.js 必须位于 app/ 目录根层级（即 app/loading.js），才能作用于整个应用；若放在子路径（如 app/dashboard/loading.js），则仅影响对应路由段。
• 它仅对客户端导航生效（服务端首次渲染不触发）；若需首屏加载态，应配合 loading.tsx（用于服务端流式响应）或 layout.tsx 中的骨架屏。
• 组件内不可使用 useRouter、useEffect 等客户端专属 Hook，因其可能在服务端执行；推荐纯静态 UI 或使用 use client 显式标记（但通常无需）。
• 加载效果默认有约 200ms 最小持续时间（防闪烁），可通过 loading.tsx + Suspense 配置进一步优化体验。

? 进阶提示：结合 error.js 和 not-found.js，可构建完整的应用级路由反馈体系——三者共同构成 App Router 的“边界协议”，是现代 Next.js 应用体验一致性的基石。