Next Router多步表单如何允许页面重载但禁止手动输入URL跳转

你现有代码的核心问题有两个：

1. 第一个useEffect为空依赖，只要组件挂载就强制跳转到step=0，自然会覆盖刷新场景下的原有路径参数
2. 第二个判断逻辑router.asPath !== router.asPath恒为false，没有任何实际判断作用

实现方案 #

你需要一个不依赖URL、用户无法手动修改的存储介质（比如sessionStorage）来记录用户实际已经完成的最高表单步骤，再和URL携带的step参数做比对，只有当用户手动篡改URL请求未完成的步骤时，才执行跳转逻辑，刷新时只要URL参数和已完成步骤匹配就正常渲染。

具体实现步骤 #

• 表单每完成一步，就把当前完成的最高步骤存入sessionStorage，比如用户通过验证进入step2时，执行sessionStorage.setItem('form_completed_step', '2')
• 改写路由判断逻辑，监听路由路径变化，每次路径变化时比对URL参数和已存储的完成步骤：

useEffect(() => {
  // 从URL拿当前请求的step
  const searchParams = new URLSearchParams(router.asPath.split('?')[1] || '')
  const reqStep = Number(searchParams.get('step')) || 0
  // 从sessionStorage拿用户实际完成的最高步骤
  const completedStep = Number(sessionStorage.getItem('form_completed_step')) || 0

  // 只有请求的步骤超过已完成的步骤，才判定为手动篡改URL，执行跳转
  if (reqStep > completedStep) {
    router.replace(`?step=${completedStep}`)
  }
}, [router.asPath]) // 依赖设置为router.asPath，只有路径变化时才触发判断

补充说明 #

如果你的表单是单会话有效，sessionStorage完全够用，关闭浏览器会自动清除，不会残留旧的表单进度；如果需要跨会话保留进度，可以换成localStorage。
如果你的项目有全局状态管理方案（比如Zustand、Redux），也可以把完成步骤存在全局状态里，但要注意做状态持久化，否则刷新时状态丢失还是会出现跳转问题。

内容的提问来源于stack exchange，提问作者Katharina Schreiber