Next.js App Router · 状态观测台

layout 保留,template 何时重置?

不要背结论:先修改“模拟应用”的状态,再导航。边框表示真实组件边界,右侧会逐条解释状态为何保留、清空或卸载。

架构设定:/workspace/projects 各自拥有独立根布局;/projects/[slug] 内放置一个 template。

选择路径
只更新 query
实验管理
example.test/workspace
document #1

工作区根布局

本次导航:初次挂载
layout 内计数器 0
layout 内侧栏状态 展开

动态项目 template 未挂载

离开子树即卸载
segment key未挂载
template 实例

工作台首页

page 会替换
pathname/workspace
search params(无)

五步验证,不靠猜

引导会直接操作上方状态机;也可以随时脱离引导,自由点击路径与 query。

1

先制造 layout 状态

/workspace 中把计数器设为 3,并折叠侧栏。

2

同根布局软导航

前往 /workspace/settings,确认两个 layout 状态都保留。

3

跨根布局

前往 /projects/atlas,完整页面加载使文档内状态归零。

4

动态 slug 改变

先写草稿,再切到 /projects/orion,template 重挂载并清空草稿。

5

只改 query

重新写草稿,再改为 ?tab=files;segment key 不变,草稿保留。

准备好了:执行第一步,先给共享 layout 写入可观察状态。