Next.js 13应用路由：页面跳转重复触发loading问题求解

问题原因 #

在Next.js 13的App路由体系中，路由段下的loading.tsx默认会对当前路由及其所有子路由的加载状态生效。当你从/projects导航到/projects/:id/edit时，如果父级projects/page.tsx存在数据请求且未做缓存优化，或者路由级loading.tsx的作用范围覆盖了子路由，就会导致父级loading先触发。

解决方案 #

方案1：将父级加载状态改为页面内处理

移除projects/loading.tsx，在projects/page.tsx内部通过Suspense组件处理自身的加载状态，让路由级loading只作用于子路由：

// projects/page.tsx
import { Suspense } from 'react';
import Link from 'next/link';

// 自定义页面加载组件（替代原loading.tsx）
function PageLoading() {
  return <div>加载项目列表中...</div>;
}

// 封装带数据请求的内容组件
async function ProjectsContent() {
  // 原数据请求逻辑
  const projects = await fetch('/api/projects', { cache: 'force-cache' });
  const data = await projects.json();

  return (
    <div>
      {data.map((project) => (
        <div key={project.id}>
          <h3>{project.name}</h3>
          <Link href={`/projects/${project.id}/edit`}>
            <button type="button">Edit</button>
          </Link>
        </div>
      ))}
    </div>
  );
}

export default function ProjectsPage() {
  return (
    <Suspense fallback={<PageLoading />}>
      <ProjectsContent />
    </Suspense>
  );
}

这样修改后，父级页面的加载状态仅在首次访问/projects时触发，导航到子路由/projects/:id/edit时只会触发子路由自身的loading.tsx。

方案2：优化父级数据请求的缓存策略

如果需要保留路由级的projects/loading.tsx，可以通过调整父级页面数据请求的缓存规则，避免导航到子路由时重新请求父级数据：

// projects/page.tsx
async function getProjects() {
  // 添加缓存配置，避免重复请求
  const res = await fetch('/api/projects', {
    // 强制缓存，除非主动刷新
    cache: 'force-cache',
    // 或者设置定时重新验证，比如1小时
    // next: { revalidate: 3600 }
  });

  if (!res.ok) throw new Error('Failed to fetch projects');
  return res.json();
}

export default async function ProjectsPage() {
  const projects = await getProjects();
  // 页面渲染逻辑...
}

当父级数据被缓存后，导航到子路由时不会重新执行父级的数据请求，自然也就不会触发父级的loading.tsx。

额外注意

确保跳转的Link使用绝对路径：

<Link href={`/projects/${project.id}/edit`}>
  <button type="button">Edit</button>
</Link>

相对路径可能导致路由解析异常，规范路径写法可以避免其他潜在问题。

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