react-router-dom: go 在 go 返回事件的历史上两次返回
[英]react-router-dom: go back twice in history on go back event
问题描述
我在路由/c1 、 /c2/ 、 /c3上映射了三个组件C1、C2、C3 。
我想阻止组件C3允许（通过浏览器事件处理）返回C2 ，而是直接返回 go 到C1 。
我如何实现这一目标？
1 个解决方案
解决方案1
1 2021-12-06 19:37:15
此功能是必需的，因为 C2 充当“post-and-redirect”。 想象一下浏览器执行 POST 操作的情况，当您刷新页面时，它会询问您是否要重新提交表单。 嗯，这正是我的情况。
在这种情况下，您可以在流程中重定向以维护您想要的历史堆栈。 这样做之后，任何返回导航（来自代码或浏览器的返回按钮的命令式/声明式）都会导致返回到您希望用户返回到 go 的正确页面。
| 行动 | 历史堆栈 | 小路 | 返回位置 |
|---|---|---|---|
| 最初的 | ["/"] |
"/" |
~ |
| 推“/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) 到 go 返回一个页面
- 使用
v6 使用
useNavigate挂钩。- 使用
navigate(to)进行正常导航 - 使用
navigate(to, { replace: true })进行重定向 - 使用
navigate(-1)到 go 返回一个页面
- 使用
Go 回反应路由器，并检测历史是否没有项目隐藏按钮
[英]Go back react router, and detect if the history have no items to hide the button
如何使用 react-router-dom 防止浏览器返回并保留 state
[英]How to prevent browser back with react-router-dom and keep state
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
回到react-router-dom时，浏览器历史记录无效
react-router-dom 如何返回（不在历史记录中）
如何在 react-router-dom 中清除浏览器后退按钮历史记录
React-router-dom (v6) go 仅在应用程序内返回
历史back（）方法返回两次
react-router-dom 与以前的 state 一起返回
Go 回反应路由器，并检测历史是否没有项目隐藏按钮
react-router-dom 链接不会转到页面内容
如何使用 react-router-dom 防止浏览器返回并保留 state
react-router 返回一个页面 你如何配置历史记录？
相关标签