我正在创建一个应用程序，其中我使用React Router v6和嵌套路由来创建一个多步骤表单。外部路由作为其中包含的每个表单的布局 Package 器。我用上下文提供程序 Package 了整个布局组件，用于管理每个表单的状态，以管理输入和当前页面等。
我的react路由器看起来像下面这样：

<Routes>
      <Route path="/" element={<Layout />}>
        <Route index element={<Pages.Home />} />
        <Route path="form" element={<FormProvider><FormLayout /></FormProvider>}>
          <Route path="form1" element={<Forms.Form1 />} />
          <Route path="form2" element={<Forms.Form2 />} />
          <Route path="Form3" element={<Forms.Form3 />} />
        </Route>
        <Route path="*" element={<Pages.NotFound />} />
      </Route>
    </Routes>

FormLayout包含导航到上一个和下一个表单组件的按钮。我使用后端提供的JSON来确定页面的顺序。类似于：

{
        "form1" : {"prev": null, "next": "form2"m "title": "Enter your name"},
        "form2" : {"prev": "form1", "next": "form3", "title": "Enter your phone"},
        "form3" : {"prev": "form2, "next": null, "title": "Enter your email"}
    }

当用户导航到form 1时，我通过使用RR useLocation查看当前url，find /form 1，并通过查看json数据中的该键来确定当前页面。我将其设置为上下文中的当前页面状态，其中还提供了上一个和下一个路由。然后我的表单布局可以使用此状态来了解下一个和上一个页面。FormLayout组件如下所示：

const FormLayout = () => {
        const {page} = useFormContext()
 
        return (
            <div>
                <Outlet/>
                <Link to={page.next}>
                    <button>
                        next
                    </button>
                 </Link>
            </div>
        )
    }

这就引出了我的问题：**如何管理页面导航，而无需将当前URL与json数据和更新状态进行比较？**任何关于如何管理表单之间导航的输入都将受到欢迎。谢谢
虽然这是我期望的行为，但我不认为这是处理这个问题的最佳方法。我不想在每个表单页面的链接组件中硬编码to="”路由，而且如果后端想要重新组织页面或更改页面标题等，可以更改json数据上的next/prev值的顺序也很重要。
一些替代方案是完全删除页面状态，查看每个组件上的路由，然后确定当前页面。我不会管理状态，但必须查看json主体以确定每个组件上的下一个和上一个路由是非常多余的。