Next.js使用shallow routing更新多步表单URL后下一步不渲染问题

问题原因及修复方案 #

1. 最直接原因：onClick回调语法错误，未正确执行两个方法

你当前的onClick写法用了逗号运算符，仅会执行nextFormStep，后续的increase是函数引用未被调用，错误的语法直接导致原有步骤更新逻辑失效：

// 错误写法
onClick={() => nextFormStep(contracts?.[isSelected]), increase }

修正为用花括号包裹多个执行语句，同时调用两个方法：

// 正确写法
onClick={() => {
  nextFormStep(contracts?.[isSelected])
  increase()
}}

2. increase函数逻辑错误，步骤值计算有误

你当前写的var newStepNumber = + 1会将步骤值固定为1，无法递进，需要从当前路由query中读取现有步骤再加1：

// 修正后的increase函数
const increase = () => {
  const currentStep = Number(router.query.step || 0)
  const newStepNumber = currentStep + 1
  router.push(`/?step=${newStepNumber}`, undefined, {
    shallow: true
  })
}

3. 额外注意：表单状态需和路由参数同步

如果你的表单步骤状态是独立于路由存储的，需要添加监听逻辑，保证路由变化时同步更新表单状态，避免手动刷新页面后步骤错乱：

useEffect(() => {
  const routeStep = Number(router.query.step || 0)
  // 假设setFormStep是更新表单步骤的状态方法，根据你的实际逻辑替换
  if (routeStep !== formStep) setFormStep(routeStep)
}, [router.query.step, formStep])

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