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

Question

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

我需要这条路线，因为在我的结帐过程中有一个步骤，用户离开 React 应用程序访问 strip 结帐页面。如果他们从 stripe checkout 中点击取消，我希望他们返回到父路由，并使用与他们进来时相同的 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> 

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

谢谢!

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>