我的 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>
);
UPDATE
在尝试了以下建议后，我最终更新了我的路径。我还简化了我的代码（硬编码），因为我只有两个步骤。 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 下渲染正确的相应组件，因此，它确实保存了状态。然而，使用浏览器按钮进行导航是不可能的。
您可以使用查询参数来设置formStep and 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组件可见。
这是一个代码沙盒 https://codesandbox.io/s/epic-thunder-w71yc?file=/pages/index.js用你的逻辑的简化版本。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
