Next.js · Navigation Lab

URL 状态与浏览器历史栈实验台

先组合一条可分享的项目 URL,再观察同一条草稿经由不同历史操作后,记录数量与指针发生了什么变化。

模拟历史,不会离开本页

一、把状态放到正确的位置

路径描述资源身份,查询参数描述可分享视图,片段定位页内区域;临时抽屉只属于组件。

资源身份(path)

slug 会先经过 encodeURIComponent,避免破坏路径结构。

视图(query)
排序(query)
重复 tag(query)

多选时会生成多个同名 tag,读取时应使用 getAll。

页内位置(hash)

实时构造结果

/workspace/projects/?
路径 · 资源身份 决定正在查看哪个项目
查询 · 可分享视图 筛选、排序与重复标签
片段 · 页内位置 定位评论或概览区域
完整 URL

抽屉已打开
组件状态:关闭

临时交互只留在组件里:开关抽屉不会改变上面的 URL,也不会新增历史记录。

二、让同一条 URL 草稿进入历史栈

先在上方改变草稿,再选择操作。下方卡片是浏览器历史的安全模拟,不会调用真实 History API。

调整上方 URL 状态,再选择一种历史操作。

refresh:重新请求当前路由,不等于硬刷新;它不新增历史记录。

    push
    截断前进分支后新增记录
    replace
    原位替换,长度不变
    back
    指针向过去移动
    forward
    指针向未来移动
    refresh
    重新请求当前路由

    三、安全导航闸门

    候选目标先解析,再检查同源、路径白名单和参数编码;实验只展示判断,不执行任何跳转。

    不会调用 location、router.push 或链接跳转;即使输入 javascript: 也只会作为普通文本解析并拒绝。

    1. 同源检查 等待检查
    2. 路径白名单 等待检查
    3. 参数编码 等待检查
    尚未检查候选目标。