17370845950

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

Next.js App Router 内置了声明式的加载状态机制——只需在 app/ 目录下创建 loading.js（推荐使用 .tsx 后缀以支持 JSX），该组件就会作为所有嵌套路由切换时的过渡 UI 自动生效。它会在数据获取（如 fetch、Server Components 渲染）或客户端导航过程中被渲染，并在目标页面准备就绪后平滑替换。

✅ 正确做法示例：
在 app/loading.tsx 中编写：

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

? 关键说明：

• loading.tsx 必须位于 app/ 根目录（即与 page.tsx、layout.tsx 同级），才能作用于整个应用的路由层级；
• 它对所有 app/ 下的路由（包括动态路由、嵌套路由）均生效，无需额外配置；
• 加载状态由 Next.js 自动触发和管理——当导航发生且目标页面仍在服务端渲染或等待数据时，该组件即显示；
• 支持 CSS 动画与响应式设计，但不应包含 useEffect、useState 等客户端逻辑（因其可能在服务端渲染阶段执行失败）；
• 若需更细粒度控制（如仅某段子路由启用加载），可在对应文件夹（如 app/dashboard/loading.tsx）中定义局部 loading.tsx，优先级高于根目录版本。

⚠️ 注意事项：

• 不要尝试用 router.events（如 routeChangeStart）模拟加载效果——App Router 已废弃该 API，且无法覆盖 Server Components 的流式渲染场景；
• loading.tsx 是 Server Component，默认无客户端交互能力，如需加载完成回调，请结合 useRouter 的 isReady 或 useEffect 在目标页面中处理；
• 确保组件返回有效 React 元素，且不抛出异常，否则可能导致白屏或 hydration 错误。

通过这一机制，你可零配置实现全站统一、性能友好、符合 React Server Components 设计哲学的路由加载体验。