資訊專欄INFORMATION COLUMN
摘要：前言項目有個需求是跳轉路由，在離開頁面前，需要彈框詢問用戶是否確定離開。
前言：
項目有個需求是：跳轉路由，在離開頁面前，需要彈框詢問用戶是否確定離開。
用react-router的
請看下面
先看的這個：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，這個是個坑！
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()方法是不能和
說白點就是，
我試了幾種方法，不行，直到找到這篇文章：
Using React-Router v4 Prompt with custom modal component
（4）在離開頁面，路由跳轉時，自定義彈框攔截，并詢問
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();
};
是否保存修改？
完美實現離開頁面，路由攔截的同時，顯示自定義模態框！
（完）
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/104195.html
摘要：如果用戶已經登錄，則順利進入路由，否則就進入登錄頁面。如果全部鉤子執行完了，則導航的狀態就是確認的。通過這個字段來判斷該路由是否需要登錄權限。還有一種情況便是當前失效了，但是依然保存在本地。通過配置，當后端接口返回未授權，讓用戶重新登錄。 vue+axios 前端實現登錄攔截（路由攔截、http攔截） 一、路由攔截登錄攔截邏輯第一步：路由攔截首先在定義路由的時候就需要多添加一個自定義字...
摘要：還是先來一段官方的基礎使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設置回調函數來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：還是先來一段官方的基礎使用案例，熟悉一下整體的代碼流程中使用了端常用到的等一些常用組件，作為的頂層組件來獲取的和設置回調函數來更新。 react-router是react官方推薦并參與維護的一個路由庫，支持瀏覽器端、app端、服務端等常見場景下的路由切換功能，react-router本身不具備切換和跳轉路由的功能，這些功能全部由react-router依賴的history庫完成，his...
摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前 隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...
閱讀 1470·2019-08-30 15:55
閱讀 1172·2019-08-30 15:52
閱讀 1281·2019-08-29 13:53
閱讀 1465·2019-08-29 11:19
閱讀 2964·2019-08-26 13:29
閱讀 526·2019-08-26 11:33
閱讀 2587·2019-08-23 17:20
閱讀 1021·2019-08-23 14:14
