react-router-dom: go 在 go 返回事件的历史上两次返回

Question

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?

Answer 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.

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