react-router-dom: go back twice in history on go back event

user_11930252 0
Viewed 1785

I have three components C1, C2, C3 mapped on routes /c1, /c2/, /c3.

I want to prevent component C3 from allowing (via browser event handling) going back to C2 and instead go directly to C1.

How do I achieve this?

react-router-dom dom-events javascript
1 Answers

This functionality is required because C2 acts as a "post-and-redirect". Imagine cases where browser performs a POST operation, and when you refresh the page it asks you if you want to resubmit the form. Well that's exactly my case.

In this case you can redirect in the flow to maintain the history stack you desire. In doing so then any back navigation (imperative/declarative from code or browser's back button) results in going back to the correct page you want the user to go back to.

Action History Stack Path Back Location
initial ["/"] "/" ~
PUSH "/c1" ["/", "/c1"] "/c2" "/"
PUSH "/c1/c2" ["/c1", "/c1/c2"] "/c1/c2" "/c1"
REPLACE "/c1/c3" ["/c1", "/c1/c3"] "/c1/c3" "/c1"
POP (1) ["/c1"] "/c1" ~

To use imperative navigation in react-router-dom:

  • v5 use the useHistory hook

    • use history.push for normal navigation
    • use history.replace for redirecting
    • use history.back or `history.go(-1) to go back a page

  • v6 use the useNavigate hook.

    • use navigate(to) for normal navigation
    • use navigate(to, { replace: true }) for redirecting
    • use navigate(-1) to go back a page
user_86908570
Related