react-router 在路由切換時進行提示

来源:https://www.cnblogs.com/shapeY/archive/2020/03/25/12566533.html

`react router ^5.1.2` 在有正在編輯的內容未保存時,發生了路由切換,此時需要給出一些提示,並由用戶控制是否進行跳轉。 在 進行路由管理時,可以使用 組件實現此功能,其中的 屬性可以接受一個函數,返回 的時候就提示,預設為window.confirm進行提示,用戶可以選擇是否跳轉; ...


react-router 版本 ^5.1.2

在有正在編輯的內容未保存時,發生了路由切換,此時需要給出一些提示,並由用戶控制是否進行跳轉。

react-router進行路由管理時,可以使用 Prompt 組件實現此功能,其中的message屬性可以接受一個函數,返回string的時候就提示,預設為window.confirm進行提示,用戶可以選擇是否跳轉;返回true的時候就直接路由切換,不進行提示。

可以將Prompt進行簡單的封裝,如下:

import { Prompt} from "react-router-dom";

export default function RouterPrompt ({message,promptBoolean}) {
    // Will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.
    return  <Prompt message={
                        location =>
                            !promptBoolean
                            ? true
                            : message || '當前頁面有未保存的內容,是否離開?'
                    }
            />
}

使用的時候,哪個組件需要在離開時進行提示,引入一下就行,可以放在組件的任意位置。是否需要提示由使用者自己控制。

            <div className="hardware">
                {/* 這裡是根據輸入框的編輯狀態來設置是否需要提示 */}
                <RouterPrompt promptBoolean={EDIT_STATUS}></RouterPrompt>
                {/* 其他內容 */}
            </div>

提示預設使用的是window.confirm,但還可以通過getUserConfirmation進行自定義。

import { HashRouter as Router} from "react-router-dom";
import { Modal} from 'antd';

// message 就是window.confirm的message,通過callback控制是否通過
// 這裡直接使用antd的Modal組件
customConfirm = (message,callback) => {
    Modal.confirm({
        title:message,
        onCancel: () => {
            callback(false);
            },
            onOk: () => {
            callback(true);
            }
    })
}
<Router getUserConfirmation={customConfirm}></Router>

效果如下:


您的分享是我們最大的動力!

更多相關文章
  • 瀏覽器的同源策略:協議相同、功能變數名稱相同、埠相同。所有瀏覽器廠商遵循這種策略。 非同源(跨域)共有三種行為受到限制: cookie、localstorage、和IndexDB無法獲取 DOM無法獲取 ATAX請求不能發送 這種同源性會有效的阻止CSRF(跨站請求)攻擊。 瀏覽器請求分為兩種:(CORS ...
  • 使用背景: 項目中使用了jquery-weui的左滑刪除組件,但在蘋果上使用會有左滑點擊穿透的現象,只能改源碼了。 在github上找,發現是gulp構建的,但版本很低,對於node版本大概要4.5.0才行,本機node版本過高用不了,所以把 node卸載了裝nvm來管理。 使用步驟: 1. 卸載本 ...
  • HTML + CSS 就是當代網頁的基石 。全世界的網站,無論其伺服器端的語言是什麼,前端都使用了 HTML + CSS。 隨著互聯網行業的快速發展,前端這一職位也越來越火熱,前端工程師的高薪資,也讓越來越多的人想要進入這個行業。 那麼,零基礎小白如何才能成為一名前端工程師呢? 首先大家要瞭解的是, ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue 同步 $n ...
  • vuex控制台告警There are multiple modules with names that only differ in casing ...
  • 如今前端開發的任職要求越來越高了,不僅要掌握 javascript,熟悉vue、react等各種框架,甚至連後端和 python 都得懂。 前幾年只要熟練HTML、CSS、JavaScript ,靠扒代碼套用代碼工具就能找到一份相對不錯的工作,看來現在這套是行不通了。 要是碰上面試官問你“Vue數據 ...
  • 對於web中的icons的各種實現的利弊,請參考:Web中實現Icon的利弊 本文以阿裡矢量圖標庫為例,說下svg圖標簡單的使用: 挑選圖標下載到本地,文件結構如下: 運行demo_index.html文件,裡面有很詳細的介紹: Unicode 引用 font-class 引用 Symbol 引用 ...
  • 模版字元串 ``反引號表示 var cyy={ name:"cyy", age:18, say:function(){ console.log('我叫'+this.name+',我今年'+this.age+'歲'); }, say2:function(){ console.log(`我叫`+this ...
一周排行
  • 在上篇文章中我們已經知道了多線程是什麼了,那麼它到底可以幹嘛呢?這裡特別聲明一個前面的委托沒看的同學可以到上上上篇博文查看,因為多線程要經常使用到委托。源碼 一、非同步、同步 1.同步(在計算的理解總是要你措不及防,同步當線程做完一件事情之後,才會執行後續動作),同步方法慢,只有一個線程執行,非同步方法 ...
  • 本文主要是講解stopwatch對程式運行時間的準確測量 僅僅介紹裡面的StartNew()方法,Restart()方法和ElapsedMilliseconds { get;}屬性 public void StartNew():作用是對新的 System.Diagnostics.Stopwatch ...
  • 一、引言 RabbitMQ是Rabbit Message Queue的簡寫,但不能僅僅理解其為消息隊列,消息代理更合適。RabbitMQ是一個由 Erlang 語言開發的AMQP(高級消息隊列協議)的開源實現,其內部結構如下: RabbitMQ作為一個消息代理,主要和消息打交道,負責接收並轉發消息。 ...
  • TerminalMACS(Terminal Manager And Check System) 遠程終端管理和檢測系統 本文同步更新地址:https://dotnet9.com/11429.html 一、本系統可監控多種終端資源: 移動端 Android iOS PC端 Windows Linux ...
  • 首先,好消息是Goole將於2020年2月份發佈Chrome 80版本。本次發佈將推進Google的“漸進改良Cookie”策略,打造一個更為安全和保障用戶隱私的網路環境。 壞消息是,本次更新可能導致瀏覽器無法向服務端發送Cookie。如果你有多個不同功能變數名稱的應用,部分用戶很有可能出現會話時常被打斷的 ...
  • 在偶然一次調試某程式時,遇到提示: 無法載入程式集*****.XmlSerializers.dll,文件找不到(Could not load file or assembly ****.XmlSerializers.dll , FileNotFoundException...)。於是嘗試在項目屬性中 ...
  • 在上一篇abp(net core)+easyui+efcore實現倉儲管理系統——入庫管理之五(四十一) 文章中實現了入庫管理的列表頁面,並實現了控制器的代碼。在今天我們學習如何在前端實現新增入庫單信息界面。 ...
  • 面向對象 面向對象是一個抽象的概念,其本質就是對事物以抽象的方式建立對應的模型。 簡單來講,比如我有一隻鋼筆,那麼我就可以通過分析,可以得到 這隻鋼筆的材第是塑料,品牌是個雜牌 ,裡面裝的墨是黑色的,可以用。這時候就能建立一個鋼筆的模型,它在這裡應該有這些屬性: 圖是一個不正確的UML類圖,但是可以 ...
  • 在ASP.NET MVC中有四種過濾器類型 Action 1、在ASP.NET MVC項目中,新建文件夾Filter,然後新建類MyCustormFilter,繼承自ActionFilterAttribute類,我們來看下ActionFilterAttribute類有如下四個方法,從命名我應該就可以 ...
  • 你需要瞭解的 HTTP Status Code Intro 現在前後端分離的開發模式越來越流行,後端負責開發對應的 API,前端只需要 關註前端頁面的數據展示和前端邏輯即可。 對於前後端分離這種開發模式,我個人還是比較喜歡的,因為這樣可以讓更專業的人做更專業的事情,後端專註於做 API 的開發設計, ...
x