react-router 在路由切换时进行提示

时间: 2019-09-24阅读: 19标签: 路由

react-router 版本 ^5.1.2

在有正在编辑的内容未保存时,发生了路由切换,此时需要给出一些提示,并由用户控制是否进行跳转。

在react-router进行路由管理时,可以使用 Prompt 组件实现此功能,其中的message属性可以接受一个函数,返回string的时候就提示,默认为window.confirm进行提示,用户可以选择是否跳转;返回true的时候就直接路由切换,不进行提示。

可以将Prompt进行简单的封装,如下:

import { Prompt} from "react-router-dom";

export default function RouterPrompt ({message,promptBoolean}) {
    // Will be called with the next location and action the user is attempting to navigate to. Return a string to show a prompt to the user or true to allow the transition.
    return  <Prompt message={
                        location =>
                            !promptBoolean
                            ? true
                            : message || '当前页面有未保存的内容,是否离开?'
                    }
            />
}

使用的时候,哪个组件需要在离开时进行提示,引入一下就行,可以放在组件的任意位置。是否需要提示由使用者自己控制。

<div className="hardware">
   {/* 这里是根据输入框的编辑状态来设置是否需要提示 */}
   <RouterPrompt promptBoolean={EDIT_STATUS}></RouterPrompt>
   {/* 其他内容 */}
</div>

提示默认使用的是window.confirm,但还可以通过getUserConfirmation进行自定义。

import { HashRouter as Router} from "react-router-dom";
import { Modal} from 'antd';

// message 就是window.confirm的message,通过callback控制是否通过
// 这里直接使用antd的Modal组件
customConfirm = (message,callback) => {
    Modal.confirm({
        title:message,
        onCancel: () => {
            callback(false);
            },
            onOk: () => {
            callback(true);
            }
    })
}
<Router getUserConfirmation={customConfirm}></Router>


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8362

JS是如何实现前端路由的 JS实现原生路由

路由就是根据不同的 url 地址展示不同的内容或页面,早期路由的概念是在后端出现的,通过服务器端渲染后返回页面,随着页面越来越复杂,服务器端压力越来越大。后来ajax异步刷新的出现使得前端也可以对url进行管理,此时

Flutter路由导航

我们通常会用屏(Screen)来称呼一个页面(Page),一个完整的App应该是有多个Page组成的。通过点击BottomNavigationBarItem来设置IndexedStack的index属性来切换,除了上面这种管理页面的方式,我们还需要实现其它功能的页面跳转

在 Vue.js 中使用嵌套路由

随着 Vue.js 单页应用(SPA)变得相当复杂,你开始需要 Vue 路由以及嵌套路由。嵌套路由允许更复杂的用户界面以及相互嵌套的组件。让我们创建一个相对简单的用例,来展示 Vue Router 中嵌套路由的实用性。

vue-router的简易实现

现在很多项目的前端都是用vue单页面实现的,而单页面中最重要的一个环节就是路由,今天来实现一个简易版本的vue-router。

vue 路由过渡动效

<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:在进入/离开的过渡中,会有 6 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

前端路由Hash与History模式

现代前端项目多为单页Web应用(SPA),在单页Web应用中路由是其中的重要环节。SPA 是 single page web application 的简称,译为单页Web应用。简单的说 SPA 就是一个WEB项目只有一个 HTML 页面,一旦页面加载完成

Flutter页面切换(命名路由)

使用基本路由相对简单灵活,适用于应用中页面不多的场景。而在应用中页面比较多的情况下,再使用基本路由,会导致大量的重复代码,此时使用命名路由会非常方便

实现一个前端路由,如何实现浏览器的前进与后退?

如果要你实现一个前端路由,应该如何实现浏览器的前进与后退 ?首先浏览器中主要有这几个限制,让前端不能随意的操作浏览器的浏览纪录:没有提供监听前进后退的事件。

优化vue-router路由管理

本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把vue-router的路由管理化繁为简、逐渐自动化的一个过程,希望能引发大家的思考;

Flutter 如何在切换页面的时候,把参数传到下一个页面?

讲解Flutter 路由传递,这是一个大的概述图。当 app 的页面变多的时候,就需要考虑页面传值的问题,在第一个页面如何把数据传递到 另外一个页面?最最基本的方法是在打开新页面,传递参数过去。但当 app 变得很大或者功能变多

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广