Next.js 带有路由的多步表单

Question

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>
  );

Run Code Online (Sandbox Code Playgroud)

更新

在尝试了以下建议后，我最终更新了我的路径。我还简化了我的代码（硬编码），因为我只有两个步骤。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;

Run Code Online (Sandbox Code Playgroud)

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

Answer 1

jul*_*ves 8

您可以使用查询参数来设置formStep和router.push处理同一页面内但显示不同 URL 的表单步骤。

import { useRouter } from 'next/router';

export default function IndexPage() {
    const router = useRouter();
    const formStep = router.query.step ?? 0;

    // Remaining JSX code
}

Run Code Online (Sandbox Code Playgroud)

然后，在转到第一个表单步骤的操作中，您可以调用如下所示的内容。

router.push('/?step=1', '/personal_info');

Run Code Online (Sandbox Code Playgroud)

这将更新浏览器上的 URL 并重新呈现页面，其中组件formStep >= 1可见。

这是一个包含逻辑简化版本的代码沙箱。

归档时间：	4 年，2 月前
查看次数：	6788 次
最近记录：	4 年，2 月前