CODEWITHSUNDEEP
javascriptdom-eventsreact-router-dom
Constantin
Constantin

Reputation: 915

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

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?

Upvotes: 3

Views: 7052

Answers (1)

Drew Reese
Drew Reese

Reputation: 202856

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

Upvotes: 5

Related Questions