浅层改 URL 不会切换组件

更新于 2026-09-22

**用浅层 URL 变更（`history.pushState` / 框架的 shallow routing）实现「选中就换地址」时，地址栏变了但组件树没变。** 任何写在目标路由组件里的 effect（例如 `setContentContext`）都不会执行，于是出现「内容看得见，AI 却认为未绑定」的双状态。

实测形态：/clips 根页面 vs /clips/[id] 详情路由

  • /clips 根页面点击剪藏后，只做浅层 URL 变更，用户始终停留在根页面组件上。
  • 正文能正常显示：它来自 /api/clips/:id。
  • 上下文绑定 setContentContext 只写在 ClipDetailClient.tsx（详情路由组件）里 → 永远不会执行。
  • 对照检查 notes、feeds 都有绑定，只有 clips 根页面有这个缺口。

修法：在真正渲染内容的那一层补上与详情路由一致的绑定 effect（跟随选中项，取消选中/卸载时清空）；或者让选中真正走路由切换。

可迁移的判断

  • 「同一个对象，界面显示有、下游却认为没有」这类双状态，先问：这两个状态是不是由同一份组件生命周期的 effect 驱动的？
  • 有「根页面 + 详情路由」两种入口的模块，绑定逻辑必须两处都有，或者下沉到共用的渲染层。只写在一处，另一处就是静默缺口。
  • 浅层改 URL 的代价是：URL 是给人看的，不是给组件树用的。依赖「路由变了组件就会跟着重建」的假设会失效。

相关