應(yīng)用場(chǎng)景:離開(kāi)當(dāng)前頁(yè)面時(shí)阶剑,提示“是否離開(kāi)”涝影,“內(nèi)容是否保存”贮尖,等
<Prompt>
<Prompt
when={formIsHalfFilledOut}
message="你確定要離開(kāi)當(dāng)前頁(yè)面嗎?"
/>
message
message: string
當(dāng)用戶試圖離開(kāi)某個(gè)位置時(shí)彈出的提示信息恃泪。
message: func
將在用戶試圖導(dǎo)航到下一個(gè)位置時(shí)調(diào)用。需要返回一個(gè)字符串以向用戶顯示提示犀斋,或者返回 true 以允許直接跳轉(zhuǎn)贝乎。
<Prompt message={location => {
const isApp = location.pathname.startsWith('/app');
return isApp ? `你確定要跳轉(zhuǎn)到${location.pathname}嗎?` : true;
}} />
這里的 location 對(duì)象指的是下一個(gè)位置(即用戶想要跳轉(zhuǎn)到的位置)叽粹±佬В可以基于它包含的一些信息,判斷是否阻止導(dǎo)航虫几,或者允許直接跳轉(zhuǎn)
when: bool
在應(yīng)用程序中锤灿,可以始終渲染 <Prompt> 組件,并通過(guò)設(shè)置 when={true} 或 when={false} 以阻止或允許相應(yīng)的導(dǎo)航持钉,而不是根據(jù)某些條件來(lái)決定是否渲染 <Prompt> 組件衡招。
項(xiàng)目中的應(yīng)用
編輯模式下,路由跳轉(zhuǎn)前提示每强,信息尚未保存始腾,并拒絕跳轉(zhuǎn)
import { Prompt } from 'dva/router';
<Prompt
when={this.state.editReceiver}
message={() => {
if (this.state.editReceiver) {
Modal.warning({
title: '您修改的信息尚未保存州刽!',
});
return false;
} else return true;
}}
/>