Next.js 13并行路由中loading.tsx与error.tsx失效求助

1. 确认Next.js版本 #

必须使用**Next.js 13.4+**版本，并行路由（Parallel Routes）和插槽的loading/error组件是该版本后正式支持的特性。

2. 修正Layout中的插槽渲染逻辑 #

在[course]/layout.tsx中，必须为每个并行路由插槽添加独立的<Suspense>边界——这是让插槽独立加载、不阻塞其他内容的核心配置。示例代码如下：

import { Suspense } from 'react';

export default function CourseLayout({
  children, // 对应@children插槽
  hero,     // 对应@hero插槽
}: {
  children: React.ReactNode;
  hero: React.ReactNode;
}) {
  return (
    <div className="course-layout">
      {/* @children插槽：无需等待@hero加载，直接渲染 */}
      {children}
      
      {/* @hero插槽：用Suspense包裹，实现独立加载边界 */}
      <Suspense>
        {hero}
      </Suspense>
    </div>
  );
}

说明：当@hero/loading.tsx存在时，Next.js会自动将其作为Suspense的兜底加载状态，无需手动指定fallback内容。

3. 确保@hero/page.tsx的异步逻辑合规 #

• 必须是异步Server Component，在组件顶层直接使用await fetch：

// [course]/@hero/page.tsx
export default async function HeroPage() {
  // 可选：添加cache配置确保每次请求触发加载状态（根据业务需求调整）
  const res = await fetch('https://api.example.com/course-hero', { cache: 'no-store' });
  const heroData = await res.json();

  return <div>{heroData.content}</div>;
}

• 若需在客户端组件中异步获取数据，改用useEffect或数据请求库（如SWR/React Query），并行路由的loading组件仅对Server Component的顶层异步请求生效。

4. 配置Error组件触发条件 #

@hero/error.tsx需满足以下要求才能触发：

• 必须是客户端组件（添加'use client'指令）
• 捕获@hero/page.tsx中抛出的错误

示例error.tsx：

// [course]/@hero/error.tsx
'use client';

export default function HeroError({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <p>Hero内容加载失败：{error.message}</p>
      <button onClick={() => reset()}>重新加载</button>
    </div>
  );
}

5. 常见排查点 #

• 检查@hero目录命名：必须以@开头，且layout中接收的props名称与插槽名匹配（如hero对应@hero）
• 开发环境可执行next dev --no-cache禁用缓存，避免缓存导致loading状态不触发
• 不要在layout或page中手动使用React.lazy，并行路由已内置懒加载逻辑

内容的提问来源于stack exchange，提问作者Bekzhan