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 返回一個頁面 你如何配置歷史記錄？
相關標簽