反应路由器暂停( Async)
反应- 路透- 暂停 (单位:千美元)"RRP" (RRP) (英语))是反应路由器 v4 & v5 的 Javascript 工具. 它提供了一个简单的方式 同步 延迟( 暂停) 由用户触发的路由器导航事件. 例如,如果用户在进程中间单击链接, 他们会的 丢失数据 如果导航继续.
详见: 控制响应路由器, 同步
RRP为 类似于:
- 反应路由器 提示 构成部分,
- 页:1 路由器 历史 街区 选项,
- 编辑 创建 History.get 用户确认 () 选项.
动机
标准回放路由器
提示组件
默认同步,所以只能显示 window.prompt()
留言。 当使用
路由器 历史 街区。 。 。 .
这个 window.prompt() 对话框相对 难看 无法
定制。 它们与最有吸引力的现代对话不一致
应用程序使用. 复兴党的动机是克服这一限制.
没错 可能 通过自定义来拥有一个不对称对话框 创建 History.get 用户确认 ()。 。 。 . 然而,这很笨拙,只允许单一的全球配置.
RRP的好处
- 有用, 不仅仅是“ 即时消息 ” .
- 很简单 添加同步导航屏蔽.
- 每个组件都完全自定义 无限制。 。 。 .
- 不需要修改历史对象.
- 兼容 React Natural 和服务器端- 发送 .
生活实例
尝试演示 : https://allpro.github.io/反应-路由-暂停
如果拉出或叉出回波,可以像这样运行演示:
- 在根文件夹中,运行
npm start - 在第二航站楼
/example文件夹,运行npm start - 演示将在 http://localhost: 3: 00 开始
- 构成部分的变动 或者说 演示会自动更新浏览器
安装
- 国家预防机制:
npm install @allpro/react-router-pause - 亚伦:
yarn add @allpro/react-router-pause - CDN: 被曝光的全球是
ReactRouterPause- 卸载量 :
<script src="https://unpkg.com/@allpro/react-router-pause/umd/react-router-pause.min.js"></script> - 达利夫:
<script src="https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/react-router-pause.min.js"></script>
- 卸载量 :
兼容性
RRP是为最大后向相容性而设计的.
它是一个反应类组件 利用 withRouter() 提供的人道主义援助
由反应-路透4+.
RRP没有 黑进 路由器上下文或使用任何非标准诡计
将来可能引起相容性问题.
同伴相互依存关系
RRP将在 任何项目 使用反应- 路透4. x 或者说 5.x, (中文(简体) ), 这需要反应 QQ15.
"peerDependencies": {
"prop-types": ">=15",
"react": ">=15",
"react-dom": ">=15",
"react-router-dom": ">=4"
}
React-Hooks 测试版本
有一个 (单位:千美元) 使用 RRP 的版本 反应呼号。 。 。 .
这是 未导出 因为它需要反应16.8或更高,
因此与旧项目不符.
这个版本是给任何有兴趣的人的:
https://github.com/allpro/react-router-pause/blob/master/src/React RouterPouseHooks.js 互联网档案馆的存檔,存档日期2013-12-22
当React-Router最终更新以提供React-houks时, rRP悬钩版将更新,以利用这一优势. 它可能会成为项目使用 更新的 React-Router.
使用量
RRP是反应组件,但不会输出任何输出. RRP 也没有显示任何提示本身 . 它只是为您的代码提供了连接和控制路由器的方法.
组件属性
RRP组件接受3道道具:
-
handler{函数}[null]选项
这叫做 每次都会 导航事件发生.
如果不提供处理器,则RRP被禁用.
见handler函数 见下文. -
when{布尔}[true]选项
设定when={false}以暂时禁用 RRP 组件. 这是使用有条件渲染的替代品. -
config{对象}[{}]选项
一个改变 RRP 逻辑的配置对象 .config.allowBookmarks{布尔}[true]
同一页的书签链接 永远 允许吗?
若为false,书签链接与页面链接处理相同.
示例
<ReactRouterPause
handler={ handleNavigationAttempt }
when={ isFormDirty }
config={{ allowBookmarks: false }}
/>
handler 函数
设置在 props.handler 将被调用 在此之前 路由器
更改位置(URL).
将三个论点转交给 handler数字 :
-
navigation{对象}
一个提供导航控制的API.
见navigationAPI 方法" 下面. -
location{对象}
反应路由器location用于描述导航事件的对象. -
action{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}你来干什么
事件动作类型 :PUSH, (中文(简体) ),REPLACE,或POP
navigation API 方法
这个 navigation API传递给处理者有这些方法:
-
navigation.isPaused()
回返true或者说false以显示是否 导航事件目前暂停. -
navigation.pausedLocation()
返回location表示已暂停导航的对象, 或者说null如果没有暂停事件. -
navigation.pause()
暂停导航事件 - 等同返回null从管理者.
说明: 这必须叫做 在此之前 处理器返回. -
navigation.resume()
触发要发生的“ 暂停” 导航事件 . -
navigation.cancel()- 说吧
清除“ 已停止” 导航, 使其不再恢复 .
取消之后,navigation.isPaused()将返回false。 。 。 .
说明: 通常没有必要 调用navigation.cancel()。 。 。 . -
navigation.push(path, state)
这个router.history.push()方法; 允许将用户重定向到另一个位置. -
navigation.replace(path, state)
这个router.history.replace()方法; 允许将用户重定向到另一个位置.
handler 函数返回值
如果处理器在返回之前不调用任何导航API方法, 因此,它必须退回其中一项答复:
true或者说undefined- 允许继续导航.false-永久取消导航活动.null- 暂停导航,也可以 可选择 稍后将恢复.Promise- 暂停航行,直到承诺达成,然后:- 如果承诺是 被拒绝, (中文(简体) ), 取消( e) 导航
- 如果承诺 决定 值为
false, (中文(简体) ), 取消( e) 导航 - 如果承诺 决定 具有任何其他价值, 恢复 导航
这个例子会暂停导航,然后在10秒后恢复.
function handleNavigationAttempt( navigation, location, action ) {
setTimeout( navigation.resume, 10000 ) // RESUME after 10 seconds
return null // null means PAUSE navigation
}
下面的例子返回一个在验证时暂停导航的承诺
数据同步。 如果承诺 决定, (中文(简体) ),
导航将恢复 除非 false 以诺言回报.
如果承诺 拒绝,导航取消.
function handleNavigationAttempt( navigation, location, action ) {
return verifySomething(data)
.then(isValid => {
if (!isValid) {
showErrorMessage()
return false // Cancel Navigation
}
// Navigation resumes if 'false' not returned, and not 'rejected'
})
}
同一位置的屏蔽
卢旺达 自动 如果新位置与 当前位置。 这样可以防止回放路由器的情景 重新装入 一个表单 当用户再次点击同一页面链接时.
两个地点的比较包括:
- 路径名 ("https://domain.com/section/page.html")
- 搜索 (? key=值和其他数值)
- 状态 (“ 值” 或 { foo: “ bar ” })
位置'hash'(书签)默认被忽略.
见 config.allowBookmarks 输入
组件属性 节.
执行情况
应用程序中的一项共同要求是: 询问 用户如果想要“ 破坏” a 进程,当它们单击导航链接时(例如填写表格).
以下是使用自定义“ 确认对话框”的2个实例 , (中文(简体) ), 显示不同的方式将 RRP 与您的代码整合 .
功能组件示例
此示例保存全部代码 内部 处理器函数,
它可以进入 navigation 方法。 。 .
这个 setState 钩子
用于存储和传递处理器到确认对话框.
import React, { Fragment } from 'react'
import { useFormManager } from '@allpro/form-manager'
import ReactRouterPause from '@allpro/react-router-pause'
import MyCustomDialog from './MyCustomDialog'
// Functional Component using setState Hook
function myFormComponent( props ) {
// Sample form handler so can check form.isDirty()
const form = useFormManager( formConfig, props.data )
const [ dialogProps, setDialogProps ] = useState({ open: false })
const closeDialog = () => setDialogProps({ open: false })
function handleNavigationAttempt( navigation, location, action ) {
setDialogProps({
open: true,
handleStay: () => { closeDialog(); navigation.cancel() },
handleLeave: () => { closeDialog(); navigation.resume() },
handleHelp: () => { closeDialog(); navigation.push('/form-help') }
})
// Return null to 'pause' and save the route so can 'resume'
return null
}
return (
<Fragment>
<ReactRouterPause
handler={handleNavigationAttempt}
when={form.isDirty()}
/>
<MyCustomDialog {...dialogProps}>
If you leave this page, your data will be lost.
Are you sure you want to leave?
</MyCustomDialog>
...
</Fragment>
)
}
类组件示例
在此示例中,导航 API 对象被指定为属性 因此,它可以进入 每一个方法在课堂上.
import React, { Fragment } from 'react'
import FormManager from '@allpro/form-manager'
import ReactRouterPause from '@allpro/react-router-pause'
import MyCustomDialog from './MyCustomDialog'
// Functional Component using setState Hook
class myFormComponent extends React.Component {
constructor(props) {
super(props)
this.form = FormManager(this, formConfig, props.data)
this.state = { showDialog: false }
this.navigation = null
}
handleNavigationAttempt( navigation, location, action ) {
this.navigation = navigation
this.setState({ showDialog: true })
// Return null to 'pause' and save the route so can 'resume'
return null
}
closeDialog() {
this.setState({ showDialog: false })
}
handleStay() {
this.closeDialog()
this.navigation.cancel()
}
handleLeave() {
this.closeDialog()
this.navigation.resume()
}
handleShowHelp() {
this.closeDialog()
this.navigation.push('/form-help')
}
render() {
return (
<Fragment>
<ReactRouterPause
handler={this.handleNavigationAttempt}
when={this.form.isDirty()}
/>
{this.state.showDialog &&
<MyCustomDialog
onClickStay={this.handleStay}
onClickLeave={this.handleLeave}
onClickHelp={this.handleShowHelp}
>
If you leave this page, your data will be lost.
Are you sure you want to leave?
</MyCustomDialog>
}
...
</Fragment>
)
}
}
内设
- 创建-反应-图书馆 - 说吧 基于 创建- 反应- 应用程序
捐款
请阅读 捐款额 关于我们行为守则的细节, 以及向我们提交拉力请求的程序.
版本
我们使用SemVer的版本。 对于现有版本, 查看此寄存器的标签 .