App Router · 路由边界控制台
同一棵路由树,观察“谁保留、谁重挂、谁等待、谁捕获”。
实例保留
新实例
等待或替代
错误冒泡
路由与组件树模拟器
- 路由参数
- team = alpha
- 上层 template
- 实例 #1
- 可见结果
- page 叶子
- 捕获者
- 无错误
app/layout.tsx
整个应用根布局
✓ 保留
实例 #1
dashboard/layout.tsx
dashboard 共享布局
✓ 保留
实例 #1
dashboard/error.tsx
包住 [team] 子段
✓ 待命
边界 #1
父段错误界面接管
[team]/layout.tsx 在同段 error.tsx 外层,错误向上冒泡到这里。
当前优先恢复动作:unstable_retry();旧版本教程里常见 reset()。
[team]/layout.tsx
动态团队段布局
✓ 保留
实例 #1
[team]/template.tsx
参数段变化时获得新 key
✓ 当前
实例 #1
[team]/error.tsx
捕获 page / 子布局运行时错误
✓ 待命
边界 #1
本段错误界面接管
page.tsx 位于该边界的子树中,所以错误在这里被捕获。
当前优先恢复动作:unstable_retry();旧版本教程里常见 reset()。
[team]/loading.tsx
Suspense:只包 page 与更深子段
✓ 空闲
边界 #1
正在流式等待页面内容
上面的同段 layout、template、error 仍可见;等待界面只替代它内部的 page / 子 layout。
[team]/page.tsx
当前路由叶子
● 已提交
实例 #1
Alpha 团队概览
page 是这条路由分支的叶子,不再包裹下一层路由。
page 是这条路由分支的叶子,不再包裹下一层路由。
[team]/not-found.tsx
notFound() 或资源缺失的替代界面
? 已接管
界面 #1
资源不存在,但路由外壳仍在
这不是运行时异常;当前分支改为渲染 not-found.tsx。
EVENT
初始请求已提交:共享 layout 与 template 均为实例 #1。
Layout 保存上下文在同一根下软导航时,共享布局保持挂载,内部状态不会因为叶子页面变化而自动清空。
Template 刻意重置同一动态段从 alpha 切到 beta,template 获得新 key;进入更深子段则保留上层 template。
Fallback 各司其职loading 处理等待,error 处理子树运行时异常,not-found 处理 notFound() 或缺失资源。
边界预测 · 先判断,再点答案
三道题都能从上面的层叠关系直接推出,不靠死记文件名。