If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm that data will be lost, React Router v4 provides a Prompt component to interrupt the Route transition and ask the user a question.

For example we need to way to tell user if he leaves the page, data will lost.

We can use 'Prompt' component from router lib.

import React from 'react';
import {Link, Route, Prompt} from 'react-router-dom'; const Home = () => (<h1>Home</h1>);
class Form extends React.Component {
state = {
dirty: false
}; setDirty = () => {
this.setState((preState, props) => {
return {
dirty: true
}
})
}; render(){
return(
<div>
<h1>Form</h1>
<input type="text" onInput={this.setDirty}/>
<Prompt
when={this.state.dirty}
message="Date will be lost"
></Prompt>
</div>
);
}
} const Guards = () => (
<div>
<Link to="/guards/home">Home</Link>
<Link to="/guards/form">Form</Link> <Route path="/guards/home" component={Home}></Route>
<Route path="/guards/form"
component={Form}
></Route>
</div>
); export default Guards;

[React Router v4] Intercept Route Changes的更多相关文章

  1. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  2. [React Router v4] Render Multiple Components for the Same Route

    React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...

  3. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  4. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  5. [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redi ...

  6. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  7. [React Router v4] Render Nested Routes

    With React Router v4 the entire library is built as a series of React components. That means that cr ...

  8. [React Router v4] Parse Query Parameters

    React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...

  9. [React Router v4] Use Regular Expressions with Routes

    We can use regular expressions to more precisely define the paths to our routes in React Router v4. ...

随机推荐

  1. POJ 1654 Area 凸包面积

    水题直接码... /********************* Template ************************/ #include <set> #include < ...

  2. Linux下文件的管理

    1.文件的创建(touch) xiaohuang@xiaohuang-virtual-machine:~/桌面$ touch myfile.txt xiaohuang@xiaohuang-virtua ...

  3. centos7.2 64位安装java

    1.  wget http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk- ...

  4. 自定义Base 64加密

    一.前言 最近做软件需要一个功能,就是对文件进行加密.本来嘛,加密算法一堆一堆的,但是试了几个成熟的加密算法后发现对文件进行加密需要的时间很长,特别是上G的文件,这样客户是接受不了的.最后没办法了,好 ...

  5. uva 1456(dp)

    题意:有n个数字u1,u2,u3-un,每一个数字出现的概率pi = ui/(u1 + u2 + - + un),分成w组.计算期望值. 第一组例子的五个数字例如以下 30 5 10 30 25 分成 ...

  6. LuceneIndexFileDeleter会保留初始的commit

    给实时索引加入了merge策略,持续更新时发现有做merge,但索引文件夹中的段数远远大于RealTimeIndexWriter中的段数,就是有些merge的段应该删除,文件夹中没有删除.而关闭sea ...

  7. Fiddler--功能简介

    Fiddler的基本介绍 Fiddler的官方网站:  www.fiddler2.com Fiddler官方网站提供了大量的帮助文档和视频教程, 这是学习Fiddler的最好资料. Fiddler是最 ...

  8. 【Codeforces Round #301 (Div. 2) A】 Combination Lock

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟水题 [代码] #include <bits/stdc++.h> using namespace std; cons ...

  9. Java 泛型-泛型类、泛型方法、泛型接口、通配符、上下限

    泛型: 一种程序设计语言的新特性,于Java而言,在JDK 1.5开始引入.泛型就是在设计程序的时候定义一些可变部分,在具体使用的时候再给可变部分指定具体的类型.使用泛型比使用Object变量再进行强 ...

  10. C++胜者树

    #include <iostream> #define MAX_VALUE 0x7fffffff using namespace std; //在这里我先反思一下.不知道怎么搞的,这个算法 ...