[React Router] Prevent Navigation with the React Router Prompt Component
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的更多相关文章
- React学习笔记-1-什么是react,react环境搭建以及第一个react实例
什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...
- [React] Intro to inline styles in React components
React lets you use "inline styles" to style your components; inline styles in React are ju ...
- React系列(一):React入门
React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...
- React Native是一套使用 React 构建 Native app 的编程框架
React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...
- react.js 从零开始(七)React (虚拟)DOM
React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...
- 如何使用TDD和React Testing Library构建健壮的React应用程序
如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...
- React环境配置(第一个React项目)
使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...
- React入门介绍(2)- React Component-React组件
React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...
- react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本: ...
随机推荐
- SQL SERVER的浮点数类型及与C#的对应关系
SQL SERVER: float 与 real 7位数或15位数.这里说的位数,不是指小数位,而是包括整数和小数在内的位数. float的位数是多少,要看float[(n)]里的n数值是多少. n ...
- ETL (数据仓库技术)
ETL,是英文 Extract-Transform-Load 的缩写,用来描述将数据从来源端经过抽取(extract).转换(transform).加载(load)至目的端的过程.ETL一词较常用在数 ...
- Element UI Form 每行显示多列,即多个 el-form-item
Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...
- hdoj---Rescue
Rescue Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Total Submis ...
- 3-3 第三天 Promise 如何使用
回调的方式来处理异步,目的是要保证一个执行顺序,先完成什么再去完成什么,它们的作用其实是相同的,显然回调更容易来书写,但是它难以维护,很容易遗漏错误处理代码而且无法使用return语句来返回这个值. ...
- ROS-tutorials-launch-查看日志
前言:launch文件的作用是一次可以启动多个节点. 1.新建launch文件 在chapter2_tutorials包下新建launch文件夹,并在launch文件夹下新建chapter2.laun ...
- .NET WebForm 简介(9.19)
WebForm是微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率. WinForm是C/S(客户端) 主要是本机执行 WebF ...
- 统计之都 http://cos.name/
http://cos.name/ IMS:一个洲际人际交流网络(为学生免费提供会员资格) 原文链接:http://cos.name/2014/07/ims-a-cross-continent-huma ...
- matplotlib显示中文字体
原始地址:http://zanyongli.i.sohu.com/blog/view/195716528.htm matplotlib 1.0.0版 对于3.0的可能不太适用,要注意语法结构! C:/ ...
- mysql组复制集群简介
mysql组复制集群拓扑: 环境: centos6.5 mysql5.7.19 一.组复制搭建: 配置hosts文件 再三台服务器上分别启动一个mysql实例,共三个. 参考配置文件如下: serve ...