In this lesson we'll show how to setup the Prompt component from React Router. We'll prompt with a static message, as well as a dynamic method with the message as a function. Finally we'll show that you can return true from the message as a function to dynamically allow navigation.

import React, { Component } from "react";
import { Prompt } from "react-router-dom"; class Profile extends Component {
state = {
name: "",
};
render() {
return (
<div>
<Prompt
when={!!this.state.name} <!-- Tell prompt should happen -->
message={location => `Are you sure you want to go to ${location.pathname}`} <!-- if return string, then prompting, if return true, then allow-->
/>
<div>
<div>Nice looking profile! What's your name?</div>
<input value={this.state.name} onChange={e => this.setState({ name: e.target.value })} />
</div>
</div>
);
}
} export default Profile;

[React Router] Prevent Navigation with the React Router Prompt Component的更多相关文章

  1. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  2. [React] Intro to inline styles in React components

    React lets you use "inline styles" to style your components; inline styles in React are ju ...

  3. React系列(一):React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  4. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  5. react.js 从零开始(七)React (虚拟)DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  6. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  7. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  8. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  9. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

随机推荐

  1. SQL SERVER的浮点数类型及与C#的对应关系

    SQL SERVER: float 与 real 7位数或15位数.这里说的位数,不是指小数位,而是包括整数和小数在内的位数. float的位数是多少,要看float[(n)]里的n数值是多少. n ...

  2. ETL (数据仓库技术)

    ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词较常用在数 ...

  3. Element UI Form 每行显示多列,即多个 el-form-item

    Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...

  4. hdoj---Rescue

    Rescue Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submis ...

  5. 3-3 第三天 Promise 如何使用

    回调的方式来处理异步,目的是要保证一个执行顺序,先完成什么再去完成什么,它们的作用其实是相同的,显然回调更容易来书写,但是它难以维护,很容易遗漏错误处理代码而且无法使用return语句来返回这个值. ...

  6. ROS-tutorials-launch-查看日志

    前言:launch文件的作用是一次可以启动多个节点. 1.新建launch文件 在chapter2_tutorials包下新建launch文件夹,并在launch文件夹下新建chapter2.laun ...

  7. .NET WebForm 简介(9.19)

    WebForm是微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率. WinForm是C/S(客户端) 主要是本机执行 WebF ...

  8. 统计之都 http://cos.name/

    http://cos.name/ IMS:一个洲际人际交流网络(为学生免费提供会员资格) 原文链接:http://cos.name/2014/07/ims-a-cross-continent-huma ...

  9. matplotlib显示中文字体

    原始地址:http://zanyongli.i.sohu.com/blog/view/195716528.htm matplotlib 1.0.0版 对于3.0的可能不太适用,要注意语法结构! C:/ ...

  10. mysql组复制集群简介

    mysql组复制集群拓扑: 环境: centos6.5 mysql5.7.19 一.组复制搭建: 配置hosts文件 再三台服务器上分别启动一个mysql实例,共三个. 参考配置文件如下: serve ...