Next.js 13引入的App Router带来了全新的加载状态管理机制，其中Loading组件是处理页面切换和数据请求加载状态的核心方案，但很多开发者在实际使用中会遇到组件无法显示的情况，需要结合框架特性逐步排查。
问题常见触发场景
首先要明确Next.js 13中Loading组件的基础使用规则：它需要在对应路由文件夹下创建loading.tsx（或loading.jsx）文件，且只能作用于App Router下的路由段，不支持Pages Router。常见的无法显示原因主要有以下几类。
1. 文件位置或命名错误
Loading组件的文件必须和page.tsx处于同一路由目录，且文件名严格为loading.tsx，不能添加额外前缀后缀，也不能放在子目录中。如果文件位置错误，框架无法自动识别加载组件，自然不会渲染。
2. 路由模式不匹配
Next.js 13同时支持App Router和Pages Router，如果项目使用的是Pages Router，那么loading.tsx机制不会生效，此时需要改用Pages Router对应的加载状态方案，比如手动在_app.tsx中处理路由切换事件。
3. 组件渲染被阻塞
如果page.tsx中使用了同步的数据请求，且没有配合React.Suspense，或者请求是阻塞式的服务端渲染逻辑，会导致Loading组件还没来得及渲染，页面内容就已经生成，从而看不到加载状态。
逐步排查步骤
可以按照以下顺序逐一验证，定位具体问题：
- 检查路由目录下是否存在正确命名的
loading.tsx文件，确认没有拼写错误 - 查看当前路由是否属于App Router，确认没有混用Pages Router的配置
- 在
loading.tsx中添加明显的测试内容，比如固定文字或样式，排除组件本身无内容的问题 - 检查
page.tsx中的数据请求逻辑，确认是否存在阻塞渲染的同步操作 - 查看浏览器控制台是否有相关报错，排除组件语法错误导致的渲染失败
对应解决方案
修正文件配置
如果是文件位置或命名问题，调整文件结构即可。例如在app/dashboard路由下，正确的结构应该是：
app/
dashboard/
page.tsx // 页面主组件
loading.tsx // 加载组件
对应的loading.tsx基础示例代码如下：
// loading.tsx
export default function Loading() {
return (
<div className="flex items-center justify-center min-h-screen">
<p className="text-lg text-gray-600">页面加载中...</p>
</div>
);
}
处理数据请求阻塞问题
如果page.tsx中有异步数据请求，需要配合React.Suspense包裹请求逻辑，让Loading组件能正常拦截加载状态。示例如下：
// page.tsx
import { Suspense } from "react";
import DataComponent from "./data-component";
export default function Page() {
return (
<Suspense fallback={<Loading />}>
<DataComponent />
</Suspense>
);
}
// data-component.tsx
async function DataComponent() {
// 模拟异步数据请求
const data = await fetch("https://ipipp.com/api/test-data");
const result = await data.json();
return <div>{result.content}</div>;
}
混用路由模式的适配方案
如果项目暂时无法切换到App Router，需要继续使用Pages Router，那么可以通过监听路由事件实现加载状态：
// _app.tsx
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
export default function App({ Component, pageProps }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
useEffect(() => {
const start = () => setLoading(true);
const end = () => setLoading(false);
router.events.on("routeChangeStart", start);
router.events.on("routeChangeComplete", end);
router.events.on("routeChangeError", end);
return () => {
router.events.off("routeChangeStart", start);
router.events.off("routeChangeComplete", end);
router.events.off("routeChangeError", end);
};
}, [router]);
return (
<>
{loading ? <div>页面切换中...</div> : null}
<Component {...pageProps} />
</>
);
}
注意事项
需要注意Loading组件本身是服务端组件，默认不需要添加"use client"指令，除非内部使用了客户端特有的交互逻辑。另外如果路由是动态路由，比如app/posts/[id]，Loading组件需要放在动态路由文件夹下，才能匹配对应路由的加载状态。
如果排查后仍然无法显示，可以尝试重启开发服务器，排除热更新导致的配置未生效问题，也可以检查Next.js版本是否为13及以上，低版本不支持App Router的Loading组件机制。
Next.js_13Loading_组件React_Server_Components路由加载组件渲染修改时间：2026-06-11 19:06:31