IT技术 - Next.js 多步表单与路由 - 吾爱随笔录

我的 Next.js 多步表单工作正常，在一页 index.js 上的所有步骤之间切换

return (
    <div>
      <Head>
        <title>Next.js Multi Step Form</title>
      </Head>
      < Navbar />
        <div className={styles.container}>
          <FormCard>
            {formStep >= 0 && (
              <ContractInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />
            )}
            {formStep >= 1 && (
              <PersonalInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                formStepToLast={formStepToLast}
              />
            )}
            {formStep >= 2 && (
              <ConfirmPurchase
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />

            )}
          </FormCard>
        </div>
    </div>
  );

更新

在尝试了以下建议后，我最终更新了我的路径。我还简化了我的代码（硬编码），因为我只有两个步骤。index.js 的当前代码如下所示：

const App = () => {
  const router = useRouter();
  const [formStep, setFormStep] = useState(0);
  const { setFormValues } = useContext(FormContext);

  useEffect(() => { router.push(`/?step=${formStep}`), setFormStep(formStep) }, [formStep]);
  
  const nextFormStep = (contract='') => {
    setFormStep(1);
    setFormValues({ contract });
  };


  const prevFormStep = () => {
    setFormStep((formStep) => formStep - 1);
    
  };

  const formStepToLast = () => {
    setFormStep(2);
  };

  return (
    <div>
      <Head>
        <title>Next.js Multi Step Form</title>
      </Head>
      < Navbar />
        <div className={styles.container}>
            {formStep >= 0 && (
              <ContractInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />
            )}
            {formStep >= 1 && (
              <PersonalInfo
                formStep={formStep}
                prevFormStep={prevFormStep}
                formStepToLast={formStepToLast}
              />
            )}
            {formStep >= 2 && (
              <ConfirmPurchase
                formStep={formStep}
                prevFormStep={prevFormStep}
                nextFormStep={nextFormStep}
              />
            )}  
        </div>
    </div>
  );
};

export default App;

尽管如此，我还是无法使用浏览器的“后退”/“下一步”按钮浏览表单。它会改变路径，但不会渲染相应的组件。我想，它有什么。与国家有关。如果我将useState 设置为(1)，它将在http://localhost:3000/?step=1 下呈现正确的对应组件，因此，它确实保存了状态。然而，使用浏览器按钮导航是不可能的。