React-router-dom：在返回事件中返回历史两次

Question

我有三个组件C1、C2、C3映射到路线/c1, /c2/, /c3。

我想阻止组件C3允许（通过浏览器事件处理）返回C2并直接转到C1.

我该如何实现这一目标？

Answer 1

需要此功能是因为 C2 充当“后重定向”。想象一下浏览器执行 POST 操作的情况，当您刷新页面时，它会询问您是否要重新提交表单。嗯，这正是我的情况。

在这种情况下，您可以在流程中重定向以维护您想要的历史堆栈。这样做后，任何后退导航（来自代码或浏览器后退按钮的命令式/声明式）都会导致返回到您希望用户返回的正确页面。

行动	历史堆栈	小路	返回位置
最初的	["/"]	"/"	〜
按“/c1”	["/", "/c1"]	"/c2"	"/"
按“/c1/c2”	["/c1", "/c1/c2"]	"/c1/c2"	"/c1"
替换“/c1/c3”	["/c1", "/c1/c3"]	"/c1/c3"	"/c1"
流行音乐 (1)	["/c1"]	"/c1"	~

要在以下位置使用命令式导航react-router-dom：

• v5 使用useHistory钩子

  • 用于history.push正常导航
  • 用于history.replace重定向
  • 使用history.back或 `history.go(-1) 返回页面

• v6 使用useNavigate钩子。

  • 用于navigate(to)正常导航
  • 用于navigate(to, { replace: true })重定向
  • 用于navigate(-1)返回页面