資訊專欄INFORMATION COLUMN
摘要：前言項(xiàng)目有個(gè)需求是跳轉(zhuǎn)路由，在離開頁面前，需要彈框詢問用戶是否確定離開。
前言：
項(xiàng)目有個(gè)需求是：跳轉(zhuǎn)路由，在離開頁面前，需要彈框詢問用戶是否確定離開。
用react-router的
請看下面
先看的這個(gè)：https://stackoverflow.com/questions/32841757/detecting-user-leaving-page-with-react-router
（1）使用react-router的
import { Prompt } from "react-router"
（2）
{ return window.confirm(`confirm to leave to ${location.pathname}?`); }} />
（3）history.block，這個(gè)是個(gè)坑！
import { history } from "path/to/history";
class MyComponent extends React.Component {
componentDidMount() {
history.block(targetLocation => {
// take your action here
return false;
});
}
render() {
//component render here
}
}
坑的原因是history.block()方法是不能和
說白點(diǎn)就是，
我試了幾種方法，不行，直到找到這篇文章：
Using React-Router v4 Prompt with custom modal component
（4）在離開頁面，路由跳轉(zhuǎn)時(shí)，自定義彈框攔截，并詢問
handlePrompt = location => {
if (!this.isSave) {
this.showModalSave(location);
return false;
}
return true;
};
showModalSave = location => {
this.setState({
modalVisible: true,
location,
});
};
closeModalSave = () => {
const { location } = this.state;
const { history } = this.props;
this.setState({
modalVisible: false,
});
history.push({
pathname: `..${location.pathname}`,
});
};
handlePrompt = location => {
if (!this.isSave) {
this.showModalSave(location);
return false;
}
return true;a
};
handleSave = () => {
const { location } = this.state;
const { history } = this.props;
this.isSave = true;
console.log(location.pathname, "pathname75");
history.push({
pathname: `..${location.pathname}`,
});
this.setState({
modalVisible: false,
});
this.saveAll();
};
是否保存修改？
完美實(shí)現(xiàn)離開頁面，路由攔截的同時(shí)，顯示自定義模態(tài)框！
（完）
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/104195.html
摘要：如果用戶已經(jīng)登錄，則順利進(jìn)入路由，否則就進(jìn)入登錄頁面。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是確認(rèn)的。通過這個(gè)字段來判斷該路由是否需要登錄權(quán)限。還有一種情況便是當(dāng)前失效了，但是依然保存在本地。通過配置，當(dāng)后端接口返回未授權(quán)，讓用戶重新登錄。 vue+axios 前端實(shí)現(xiàn)登錄攔截（路由攔截、http攔截） 一、路由攔截登錄攔截邏輯第一步：路由攔截首先在定義路由的時(shí)候就需要多添加一個(gè)自定義字...
摘要：還是先來一段官方的基礎(chǔ)使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設(shè)置回調(diào)函數(shù)來更新。 react-router是react官方推薦并參與維護(hù)的一個(gè)路由庫，支持瀏覽器端、app端、服務(wù)端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉(zhuǎn)路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：還是先來一段官方的基礎(chǔ)使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設(shè)置回調(diào)函數(shù)來更新。 react-router是react官方推薦并參與維護(hù)的一個(gè)路由庫，支持瀏覽器端、app端、服務(wù)端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉(zhuǎn)路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：其實(shí)就是我們開始掛載上去的我們在這里出去，我們就可以在回調(diào)里面只處理我們的業(yè)務(wù)邏輯，而其他如斷網(wǎng)超時(shí)服務(wù)器出錯(cuò)等均通過攔截器進(jìn)行統(tǒng)一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前 隨著業(yè)務(wù)的不斷累積，目前我們 ToC 端主要項(xiàng)目，除去 node_modules， bu...
閱讀 1482·2019-08-30 15:55
閱讀 1183·2019-08-30 15:52
閱讀 1303·2019-08-29 13:53
閱讀 1475·2019-08-29 11:19
閱讀 2987·2019-08-26 13:29
閱讀 539·2019-08-26 11:33
閱讀 2604·2019-08-23 17:20
閱讀 1033·2019-08-23 14:14
