在 React Router 中使用参数重定向到父路由

Question

我有一个反应应用程序，我在其中使用反应路由器来控制结帐过程中的步骤。我正在尝试创建一个重定向回父路由的嵌套路由。

我需要这条路线，因为在我的结账过程中有一个步骤，用户离开 React 应用程序访问条带结账页面。如果他们从条带结帐中点击取消，我希望他们使用相同的 URL 参数 return 到父路由。

目前粗体路由无法检索父路由的存储。

{/*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>

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

谢谢！

Answer 1

如果我理解你的问题，你想从 ".../: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>

在 React Router 中使用参数重定向到父路由

Redirect to Parent Route with Parameter in React Router

reactjs

react-router