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

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

How do I achieve this?

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

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

How do I achieve this?

• javascript
• dom-events
• react-router-dom

Share Improve this question Follow asked Dec 5, 2021 at 18:09 ConstantinConstantin 91511 gold badge99 silver badges3232 bronze badges 1

• 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. – Constantin Commented Dec 5, 2021 at 18:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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