Next.js 带路由的多步表单 [英] Next.js multi step form with routing
问题描述
我的 Next.js 多步骤表单工作得很好，所有步骤都在一个页面 index.js 上切换
返回 (<头><title>Next.js 多步骤表单</title></头><导航栏/><div 类名={styles.container}><表格卡>{formStep >= 0 &&(<合同信息formStep={formStep}prevFormStep={prevFormStep}nextFormStep={nextFormStep}/>)}{formStep >= 1 &&(<个人信息formStep={formStep}prevFormStep={prevFormStep}formStepToLast={formStepToLast}/>)}{formStep >= 2 &&(<确认购买formStep={formStep}prevFormStep={prevFormStep}nextFormStep={nextFormStep}/>)}</表单卡></div></div>);更新
在尝试了以下建议后，我最终更新了我的路径.我还简化了我的代码(硬编码)，因为我只有两个步骤.index.js 的当前代码如下所示:
const App = () =>{常量路由器 = useRouter();const [formStep, setFormStep] = useState(0);常量 { setFormValues } = useContext(FormContext);useEffect(() => { router.push(`/?step=${formStep}`), setFormStep(formStep) }, [formStep]);const nextFormStep = (contract='') =>{setFormStep(1);setFormValues({ 合同 });};const prevFormStep = () =>{setFormStep((formStep) => formStep - 1);};const formStepToLast = () =>{setFormStep(2);};返回 (<头><title>Next.js 多步骤表单</title></头><导航栏/><div 类名={styles.container}>{formStep >= 0 &&(<合同信息formStep={formStep}prevFormStep={prevFormStep}nextFormStep={nextFormStep}/>)}{formStep >= 1 &&(<个人信息formStep={formStep}prevFormStep={prevFormStep}formStepToLast={formStepToLast}/>)}{formStep >= 2 &&(<确认购买formStep={formStep}prevFormStep={prevFormStep}nextFormStep={nextFormStep}/>)}</div></div>);};导出默认应用程序；不过，我还是无法使用浏览器的后退"/下一个"按钮浏览表单.它会改变路径，但不会渲染相应的组件.我想，它有smth.与国家有关.如果我将 useState 设置为 (1)，它将在 http://localhost:3000/?step=1 下呈现正确的相应组件，因此，它确实保存了状态.但是使用浏览器按钮导航是不可能的.
解决方案 您可以使用查询参数来设置 formStep 和 router.push 来处理表单步骤在同一页面中，但显示的 URL 不同.
import { useRouter } from 'next/router';导出默认函数 IndexPage() {常量路由器 = useRouter();const formStep = router.query.step ??0;//剩余的 JSX 代码}
然后，在转到第一个表单步骤的操作上，您可以调用类似以下内容.
router.push('/?step=1', '/personal_info');
这将更新浏览器上的 URL 并重新呈现页面，其中 formStep >= 1 组件可见.
这是一个 codesandbox，其简化了你的逻辑版本.
My Next.js multistep form works just fine, switching between steps all on one page 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
After trying out the below suggestions, I ended up having my path updated. I also simplifies my code (hardcoded), as I only have two steps. The current code for the index.js looks the following:
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;
Still, I am not managing to navigate through form with the browser Back / Next buttons. It will change the path, but won't render the corresponding component. I assume, it hast smth. to do with the State. If I set useState to (1), it will render the right corresponding component under http://localhost:3000/?step=1, so, it does save the state. However navigating with the browser Buttons is impossible.
解决方案 You can use a query parameter to set the formStep and router.push to handle the form steps within the same page but have different URLs displayed.
import { useRouter } from 'next/router';
export default function IndexPage() {
const router = useRouter();
const formStep = router.query.step ?? 0;
// Remaining JSX code
}
Then, on the action to go to the first form step you can call something like the following.
router.push('/?step=1', '/personal_info');
This will update the URL on the browser and re-render the page with the formStep >= 1 components visible.
Here's a codesandbox with a simplified version of your logic.
这篇关于Next.js 带路由的多步表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
