Next.js 带路由的多步表单答案

【问题标题】：Next.js multi step form with routingNext.js 带路由的多步表单
【发布时间】：2021-08-15 11:27:06
【问题描述】：

我的 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;

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

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

您可以使用查询参数设置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
}

然后，在转到第一个表单步骤的操作上，您可以调用类似以下内容。

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

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

这是一个codesandbox，其中包含您的逻辑的简化版本。

【讨论】：

我在 cmets 中说同样的话
这很有效，直到我尝试浏览器中的来回按钮。在您的沙箱中它们可以工作，我有一个问题，即我的 formSteps 是状态的一部分。 const [formStep, setFormStep] = useState(0);我想这就是为什么浏览器不会真正来回移动
将初始状态设置为const [formStep, setFormStep] = useState(router.query.step ?? 0);，应该会处理它。
浏览器后退按钮将我引导至 localhost/3000，但仍呈现第 1 步，而不是应有的第 0 步
您可以使用useEffect查看路由器变化和状态变化