Next.js App Router / 导航实验台

照片详情，为何有时是弹窗、有时是整页？

同一个 /photo/[id] URL，会因导航方式不同落入不同渲染路径。操作下方的“浏览器”，观察并行槽、拦截规则与历史栈怎样共同决定画面。

软导航 / 客户端状态 硬导航 / 重新匹配 并行槽 / 路由轨迹
当前 URL /feed
feed 背景 正在显示
@modal 当前槽 default.tsx → null
渲染形态 照片流完整页

拦截标记按“路由段”回望

切换标记，观察它跨越的是可访问的 URL 段，而非磁盘目录层级。

硬刷新时，未匹配槽找谁？

default.tsx 是并行槽在完整重载时的兜底，不是 loading，也不是错误页。

保留 @modal/default.tsx 返回 null，表示此刻不展示模态框
当前：兜底存在。在 /photo/2 刷新时，children 渲染标准照片详情，@modal 走 default.tsx → null。

软导航 soft navigation

<Link> 客户端切换；Next.js 保留未改变槽的活动状态，所以 feed 留在 children 背后，详情进入 @modal。

硬导航 hard navigation

地址栏打开或刷新会重建路由树；没有可恢复的客户端槽状态，标准 photo/[id] 负责整页，其他槽需要 default.tsx。

四个即时判断：把“URL”和“画面”分开想

选择后立即显示解析。相同 URL 并不保证相同 UI，关键还包括“如何到达”。

1从 /feed 点击照片的 <Link href="/photo/3">，最可能看到什么？
2模态框已打开且存在 default.tsx，此时刷新 /photo/3 会怎样？
3删除 @modal/default.tsx 后直接打开 /photo/5，风险是什么？
4app/@modal/(.)photo 中的 (.) 为何能匹配根级 photo？

实验模型聚焦 App Router 的核心匹配行为；在真实项目中，关闭模态框通常调用 router.back()，并为无历史记录的情况准备显式回退路径。