我有一个react应用程序,使用react路由控制 checkout 过程中的步骤.我试图创建一个嵌套路由,重定向回父路由.

我需要这个路径,因为在我的签出中有一个步骤,用户可以离开react应用程序访问条带签出页面.如果他们在条带签出中点击cancel,我希望他们返回到父路由,使用他们通过的相同URL参数.

现在,粗体的路由无法检索父路由的存储路径.

{/*Main Application (ID is Specified) */}
<Route path="/:storeid" element={<MainPage />}>

    <Route index element= {<BuyPage />} />
    <Route path="ChooseAmount" element= {<ChooseAmount/>} /> 
    <Route path="BuySummary"  element={<BuySummar/>} />
    **<Route path="Buy-Canceled" element={<Navigate replace to="/:storeid" />} />**
    <Route path="*" element={<Navigate replace to="/Page-Not-Found" />} />
</Route> 

有什么建议吗?理想情况下,我希望避免在服务器端处理这个问题,但我知道这将是一个解决方案.

谢谢

推荐答案

如果我理解你的问题,你想从".../:storeid/BuySummary"改到".../:storeid".使用相对路径".."将一个路径段返回到父路由的路径.

<Route path="/:storeid" element={<MainPage />}>
  <Route index element= {<BuyPage />} />
  <Route path="ChooseAmount" element= {<ChooseAmount/>} /> 
  <Route path="BuySummary"  element={<BuySummar/>} />
  <Route path="Buy-Canceled" element={<Navigate replace to=".." />} />
  <Route path="*" element={<Navigate replace to="/Page-Not-Found" />} />
</Route>

Reactjs相关问答推荐

为什么我的标签在Redux API中不能正常工作?

react 下拉菜单任务

在Reaction中测试条件组件

如何解决Reaction中遗留的上下文API错误?

React 错误无法读取未定义的属性(读取id)#react

当从子状态更改复制时,react 父状态更改.我该如何防止这种情况?

React Wordpress Apache 在索引之外重新加载 -> 未找到页面

画布:用鼠标绘制形状时重新绘制整个画布会导致卡顿

Syncfusion:带有 TabItemsDirective 的选项卡组件不显示任何内容

如何在 React.js 中提取 PDF 的内容?

当 React 中的状态发生变化时如何停止重新加载谷歌 map ?

如何使用 React 更改 Material UI 中 ButtonGroup 的 colored颜色 ?

如何在同一路由路径上重新渲染组件(链接,V6)reactjs

将 ref 赋予功能组件以使用内部功能

在 Spring Cloud Gateway 中运行的 React SPA 页面刷新出现白标错误

如何检索包含动态段的未解析路径?

如何解决在 react.js 中找不到模块错误

如何解决在 react.js 中找不到模块错误

如何在组件文件夹内的react 组件文件中导入外部css文件?

bootstrap 导航栏切换器在 reactjs 中不起作用