Next.js浅路由答案

【问题标题】：Next.js shallow routingNext.js浅路由
【发布时间】：2021-10-17 21:41:27
【问题描述】：

我有一个多步骤表单，并希望根据表单步骤更改我的路径。我发现有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() 现在坏了。任何想法为什么？

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

不知何故，我不得不直接在 onClick 内部编写函数：

onClick={() => {
   nextFormStep(contracts?.[isSelected]);
   {router.push(`/?step=${+1}`, undefined, {
     shallow: true
   });
  }; 
 }
}

我知道这段代码真的很丑。如果您有任何折射建议，欢迎您！

【讨论】：