reactjs - Next.js 浅层路由
问题描述
我有一个多步骤表格,并希望根据表格步骤更改我的路径。我发现有smth。像可以用于此目的的浅路由。所以在我的表单步骤号零组件中,我添加了路由器和增加功能。
export default function ContractInfo({ formStep, prevFormStep, nextFormStep, selected }) {
const router = useRouter();
const { query } = router;
const { formStepsNumer } = query;
const increase = () => {
var newStepNumber = + 1;
router.push(`/?step=${newStepNumber}`, undefined, {
shallow: true
});
};
........ more irrelevant code
注意,我没有给出所有代码,否则会变得太复杂。在添加浅层路由之前,一切正常。现在的问题是,正如我所愿,我的 URL 在单击时更改了,但下一个表单步骤将不再呈现。
..... above irrelevant code
<div className="mt-3 sm:mt-0 sm:ml-3">
<a
//onClick={nextQuizStep}
onClick={() => nextFormStep(contracts?.[isSelected]), increase }
className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-yellow-500 hover:bg-yallow-600 md:py-4 md:text-lg md:px-10"
>
Next
</a>
</div>
基本上以前工作的 NextFormStep() 现在已经坏了。任何想法为什么?
解决方案
不知何故,我不得不直接在 onClick 内部编写我的函数:
onClick={() => {
nextFormStep(contracts?.[isSelected]);
{router.push(`/?step=${+1}`, undefined, {
shallow: true
});
};
}
}
我知道这段代码真的很丑。如果您有任何折射建议,欢迎您!
推荐阅读
- angular - TypeError:ApplicationServiceMock.application$.pipe 不是函数
- java - 如何使用 Eclipse 将 CSV 文件加载到数据库中
- arcore - 如何渲染始终沿运动移动的对象
- javascript - 为什么返回的结果中没有“String#match / RegExp#exec”的附加属性?
- java - 如何知道 JTable 何时已排序
- javascript - How to sent id from one page to another when click on submit?
- angular6 - 如何在Angular6中读取和显示非结构化Excel工作表数据
- sql - 我使用 LIKE 和通配符创建了一个 PDO 准备好的语句。目的是寻找一名工作人员
- java - 使用 apache-commons-fileupload 在 Spring 中上传文件时出现问题
- powershell - 如何丢弃 PowerShell ActiveDirectory cmdlet 的错误?