Come back to Calling Route with data

Question

I'm pretty new to react router so I want to know whether the following scenario is possible or not.

I have two Routes. Detail Route & Listing Route. From Detail page I have a button "Add" which is suppose to open the Listing Route and on that route if use selects something I want to bring that back to Detail Route along with the user selected item.

I understand that using react router v6 I can do navigate(-1) in list route to navigate back 1 page but the problem is that there is no way to return the selected item(unless I use store). Another approach is to use navigate('/detail-page', {state: {selectedItem}, replace:true) which actually pass along the selected item. However, it also messes up the browser history and if I do navigate(-1) from detail page it doesn't take user back to last page because last page is the detail page.

Answer 1

It's sort of up to you to decide how you want back navigation to work. I think you basically have 2 "trains of thought" to implement.

1. Always do "forward" navigations between the detail and listing pages.

   The idea here is to use PUSH actions to navigate forward between the two pages. Clicking the "Add" button from the detail pages navigates forward to the listing page, and upon "selection" again navigate forward to the detail page with the appropriate route state. You'll maintain effectively a history stack of "detail/listing" pairs.

   • PROS: Back navigations will be simple/trivial, the user will simply navigate back between all the detail/listing pages they visited.
   • CONS: Any back navigations to previous details pages that had any route state will be lost, so this may not be ideal.

   Because of the route state issue it may be a poor user experience to go back to a page expecting to see the same "state" that was there previously. Essentially you'll have a history stack with a bunch of detail components all without the route state they had before. You'll maintain effectively a single "detail|listing" page at the top of the history stack.

2. Always do "redirect" navigations between the detail and listing pages.

   Use REPLACE` actions to navigate between the two pages.

   • PROS: Back navigations will still be simple/trivial, any back navigation action will navigate back to the page the user was on prior to starting on the detail page.
   • CONS: There will be no "history" of the interactions between the detail and listing pages. Maybe this isn't ideal for what you want to track within the app.

The key takeaway here is that if you mix a PUSH in one direction from the detail page and a REPLACE in the other from the listing page, you'll keep pushing detail pages onto the stack.