Redirect to Parent Route with Parameter in React Router

Question

I have a react application where I'm using react-router to control the steps in a checkout process. I'm trying to create a nested route that redirects back to the parent route.

I need this route because there is one step in my check-out where users leave the react application to visit a stripe checkout page. If they hit cancel from the stripe checkout, I'd like for them to return to the parent route with the same URL parameter they came in through.

Right now the bolded route isn't able to retrieve the stored of the parent route.

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

Any advice? I'd ideally like to avoid having to handle this one on the server-side, but know that this would be a solution.

Thanks!

Answer 1

If I understand your question, you want to redirect from ".../:storeid/BuySummary" to ".../:storeid". Use a relative path ".." to go back one path segment to the parent route's path.

<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>