Next.js App目录中路由组导致Loading UI导航时失效问题

架构老林

2026-6-25

问题分析与解决方案

问题现象

无路由组时，app/deals/下的loading.tsx工作正常：从/deals/all导航到/deals/some时，会立即显示加载UI。
添加路由组(foo)后，(foo)/loading.tsx仅在首次打开/deals/all时显示初始加载UI；从/deals/all导航到/deals/some时，加载UI不再触发。

原因

在Next.js App Router中，loading.tsx的触发逻辑是：

仅负责当前目录及其子路由的初始外部导航（首次进入该路由组覆盖的页面），或跨子目录的路由切换（比如从/deals/all跳转到/blogs/all）。
当在/deals/all和/deals/some之间导航时，二者共享(foo)/layout.tsx布局，属于同一子目录下的页面切换，Next.js会复用现有布局，不会触发上层(foo)/loading.tsx。

解决方案

在(foo)/deals目录下添加专属的loading.tsx，用于处理deals子路由之间的导航加载：

调整后的路由结构：

app/
└── (foo)/
    ├── deals/
    │   ├── all/
    │   │   └── page.tsx
    │   ├── some/
    │   │   └── page.tsx
    │   ├── other/
    │   │   └── page.tsx
    │   └── loading.tsx  // 新增：deals子路由专属加载组件
    ├── blogs/
    │   ├── all/
    │   │   └── page.tsx
    │   └── some/
    │       └── page.tsx
    ├── layout.tsx
    └── loading.tsx

效果说明

首次进入/deals/all或/blogs/all时，触发(foo)/loading.tsx显示初始加载UI；
在/deals/all、/deals/some、/deals/other之间导航时，触发(foo)/deals/loading.tsx显示加载UI；
从/deals/all导航到/blogs/all时，触发(foo)/loading.tsx显示加载UI。