Next.js 13 App Router并行路由页面刷新404及loading.js失效问题求助

核心思路 #

通过抽离头部的异步逻辑为独立组件，让并行路由的page.js和default.js都渲染该组件，既解决子路由刷新404的问题，又能触发loading.js的加载状态。

步骤1：抽离头部核心异步组件 #

创建单独组件封装头部的服务器请求与渲染逻辑：

// components/HeaderContent.js
async function HeaderContent() {
  // 执行服务器请求（示例）
  const res = await fetch('https://your-api-endpoint/header-info', {
    cache: 'force-cache' // 可根据需求调整缓存策略
  });
  const headerData = await res.json();

  return (
    <header className="header">
      <nav>
        <h1>{headerData.siteName}</h1>
        {/* 其他头部内容 */}
      </nav>
    </header>
  );
}

export default HeaderContent;

步骤2：更新并行路由的page.js #

让@header/page.js导入并渲染抽离的组件：

// @header/page.js
import HeaderContent from '@/components/HeaderContent';

export default async function HeaderPage() {
  return <HeaderContent />;
}

步骤3：添加并行路由的default.js #

创建@header/default.js，同样渲染抽离的异步组件（需保持组件异步特性）：

// @header/default.js
import HeaderContent from '@/components/HeaderContent';

export default async function HeaderDefault() {
  return <HeaderContent />;
}

步骤4：确保loading.js正确配置 #

@header/loading.js作为加载状态组件，保持同步渲染：

// @header/loading.js
export default function HeaderLoading() {
  return (
    <header className="header-skeleton">
      {/* 骨架屏或加载提示 */}
      <div className="skeleton-heading"></div>
      <div className="skeleton-nav-links"></div>
    </header>
  );
}

原理说明 #

• 添加default.js后，子路由（如/some-page）刷新时，Next.js会用该文件作为@header并行路由的默认内容，避免404错误。
• 由于default.js渲染的是异步组件HeaderContent，Next.js会识别到该路由段处于加载状态，自动显示loading.js的内容，直到服务器请求完成并渲染头部内容。

可选优化 #

• 如果需要每次访问都触发加载状态，可调整fetch的缓存策略为cache: 'no-store'或revalidate: 0。
• 若头部内容需根据路由差异化渲染，可在default.js中添加条件判断，但需保持组件的异步特性以触发loading。

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