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?
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
history.push for normal navigationhistory.replace for redirectinghistory.back or `history.go(-1) to go back a pagev6 use the useNavigate hook.
navigate(to) for normal navigationnavigate(to, { replace: true }) for redirectingnavigate(-1) to go back a page