# @allpro/react-router-pause 中文文档 规范地址：https://npmcn.com/package/%40allpro/react-router-pause/ 版本：1\.1\.3 npm 元数据更新时间：2022-04-04T13:34:25.686Z 中文译文更新时间：2026-11-06T23:47:11.583Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40allpro/react-router-pause 原文对照：https://npmcn.com/package/%40allpro/react-router-pause/?lang=original 项目主页：https://allpro.github.io/react-router-pause 源码仓库：https://github.com/allpro/react-router-pause ## 关键信息（来自 npm 元数据） - 包体积（解压后）：982 kB，10 个文件 - 模块格式：ESM + CJS - TypeScript 类型：未声明 - Node.js 要求：\>=8 - 运行依赖：1 个 - peer 依赖：prop-types \>=15，react \>=15，react-dom \>=15，react-router-dom \>=4 - 首次发布：2019-04-11T08:10:19.545Z - 最新版本发布：2019-05-17T17:10:55.876Z - 近 30 天下载量：2154（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：12（近 12 个月 0 个） ## 中文简介 React 路由器提供自定义同步导航屏蔽的帮助工具 ## 安装 ```sh npm install @allpro/react-router-pause ``` 也可以使用：`pnpm add @allpro/react-router-pause`、`yarn add @allpro/react-router-pause`、`bun add @allpro/react-router-pause` ## README # 反应路由器暂停( Async) [![npm package](http://img.shields.io/npm/v/@allpro/react-router-pause.svg?style=flat-round)](https://www.npmjs.com/package/@allpro/react-router-pause) [![gzip-size](http://img.badgesize.io/https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/@allpro/react-router-pause.min.js?compression=gzip)](http://img.badgesize.io/https://cdn.jsdelivr.net/npm/@allpro/react-router-pause/umd/@allpro/react-router-pause.min.js) [![install-size](https://packagephobia.now.sh/badge?p=@allpro/react-router-pause)](https://packagephobia.now.sh/result?p=@allpro/react-router-pause) [![build](https://travis-ci.org/allpro/react-router-pause.svg?branch=master)](https://travis-ci.org/allpro/react-router-pause) [![coverage](https://coveralls.io/repos/github/allpro/react-router-pause/badge.svg?branch=master)](https://coveralls.io/github/allpro/react-router-pause?branch=master) [![license](https://badgen.now.sh/badge/license/MIT/blue)](https://github.com/allpro/react-router-pause/blob/master/LICENSE) [![donate](https://img.shields.io/badge/Donate-PayPal-green.svg?style=flat-round)](https://paypal.me/KevinDalman) [反应- 路透- 暂停](https://www.npmjs.com/package/@allpro/react-router-pause) (单位:千美元)**"RRP" (RRP) (英语)**)是反应路由器 v4 & v5 的 Javascript 工具. 它提供了一个简单的方式 _同步_ 延迟( 暂停) 由用户触发的路由器导航事件. 例如,如果用户在进程中间单击链接, 他们会的 _丢失数据_ 如果导航继续. 详见: **[控制响应路由器, 同步](https://medium.com/@kevin.dalman/control-react-router-asynchronously-b5c0e88013ab)** **RRP为 _类似于:_** - 反应路由器 [提示](https://reacttraining.com/react-router/web/api/Prompt) 构成部分, - 页:1 [路由器 历史 街区](https://github.com/ReactTraining/history#blocking-transitions) 选项, - 编辑 [创建 History.get 用户确认 ()](https://github.com/ReactTraining/history/blob/master/README.md#customizing-the-confirm-dialog) 选项. **动机** 标准回放路由器 [提示组件](https://reacttraining.com/react-router/web/api/Prompt) 默认同步,所以只能显示 `window.prompt()` 留言。 当使用 [路由器 历史 街区](https://github.com/ReactTraining/history#blocking-transitions)。 。 。 . 这个 `window.prompt()` 对话框相对 **难看** 无法 定制。 它们与最有吸引力的现代对话不一致 应用程序使用. **复兴党的动机是克服这一限制.** 没错 _可能_ 通过自定义来拥有一个不对称对话框 [创建 History.get 用户确认 ()](https://github.com/ReactTraining/history/blob/master/README.md#customizing-the-confirm-dialog)。 。 。 . 然而,这很笨拙,只允许单一的全球配置. **RRP的好处** - 有用, 不仅仅是“ 即时消息 ” . - _很简单_ 添加同步导航屏蔽. - 每个组件都完全自定义 _无限制_。 。 。 . - 不需要修改历史对象. - 兼容 React Natural 和服务器端- 发送 . ## 生活实例 尝试演示 : [https://allpro.github.io/反应-路由-暂停](https://allpro.github.io/react-router-pause) 播放演示代码 : [https://codesandbox.io/s/github/allpro/ react-router-pause/tree/master/example 互联网档案馆的存檔,存档日期2013-12-21](https://codesandbox.io/s/github/allpro/react-router-pause/tree/master/example) 如果拉出或叉出回波,可以像这样运行演示: - 在根文件夹中,运行 `npm start` - 在第二航站楼 `/example` 文件夹,运行 `npm start` - 演示将在 http://localhost: 3: 00 开始 - 构成部分的变动 _或者说_ 演示会自动更新浏览器 ## 安装 - 国家预防机制: `npm install @allpro/react-router-pause` - 亚伦: `yarn add @allpro/react-router-pause` - CDN: 被曝光的全球是 `ReactRouterPause` - 卸载量 : `` - 达利夫: `` ## 兼容性 RRP是为最大后向相容性而设计的. 它是一个反应类组件 利用 `withRouter()` 提供的人道主义援助 由反应-路透4+. RRP没有 _黑进_ 路由器上下文或使用任何非标准诡计 将来可能引起相容性问题. #### 同伴相互依存关系 RRP将在 **_任何项目_** 使用反应- 路透4. x _或者说_ 5.x, (中文(简体) ), 这需要反应 QQ15. ```json "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` 函数](https://npmcn.com/package/%40allpro/react-router-pause/#readme-handler-function)** 见下文. - **`when`**   {布尔} `[true]`   _选项_ 设定 `when={false}` 以暂时禁用 RRP 组件. 这是使用有条件渲染的替代品. - **`config`**   {对象} `[{}]`   _选项_ 一个改变 RRP 逻辑的配置对象 . - **`config.allowBookmarks`**   {布尔} `[true]` 同一页的书签链接 _永远_ 允许吗? 若为 `false`,书签链接与页面链接处理相同. ###### 示例 ```javascript ``` ### `handler` 函数 设置在 `props.handler` 将被调用 **_在此之前_** 路由器 更改位置(URL). 将三个论点转交给 `handler`数字 : - **`navigation`**   {对象} 一个提供导航控制的API. 见 **[`navigation` API 方法](https://npmcn.com/package/%40allpro/react-router-pause/#readme-navigation-api-methods)**" 下面. - **`location`**   {对象} 反应路由器 [`location`](https://reacttraining.com/react-router/web/api/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秒后恢复. ```javascript function handleNavigationAttempt( navigation, location, action ) { setTimeout( navigation.resume, 10000 ) // RESUME after 10 seconds return null // null means PAUSE navigation } ``` 下面的例子返回一个在验证时暂停导航的承诺 数据同步。 如果承诺 **决定**, (中文(简体) ), 导航将恢复 _除非_ `false` 以诺言回报. 如果承诺 **拒绝**,导航取消. ```javascript 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` 输入 **[组件属性](https://npmcn.com/package/%40allpro/react-router-pause/#readme-component-properties)** 节. ## 执行情况 应用程序中的一项共同要求是: _询问_ 用户如果想要“ 破坏” a 进程,当它们单击导航链接时(例如填写表格). **以下是使用自定义“ 确认对话框”的2个实例** , (中文(简体) ), 显示不同的方式将 RRP 与您的代码整合 . ### 功能组件示例 此示例保存全部代码 _内部_ 处理器函数, 它可以进入 `navigation` 方法。 。 . 这个 [`setState` 钩子](https://reactjs.org/docs/hooks-state.html) 用于存储和传递处理器到确认对话框. ```javascript 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 ( If you leave this page, your data will be lost. Are you sure you want to leave? ... ) } ``` ### 类组件示例 在此示例中,导航 API 对象被指定为属性 因此,它可以进入 每一个方法在课堂上. ```javascript 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 ( {this.state.showDialog && If you leave this page, your data will be lost. Are you sure you want to leave? } ... ) } } ``` ## 内设 - [创建-反应-图书馆](https://github.com/DimiMikadze/create-react-library) - 说吧 基于 [创建- 反应- 应用程序](https://github.com/facebook/create-react-app) ## 捐款 请阅读 [捐款额](https://github.com/allpro/react-router-pause/blob/master/CONTRIBUTING.md) 关于我们行为守则的细节, 以及向我们提交拉力请求的程序. ## 版本 我们使用SemVer的版本。 对于现有版本, 查看此寄存器的标签 . ## 许可证 麻省理工学院 [全部正则](https://github.com/allpro) 见 [自由主义](https://github.com/allpro/react-router-pause/blob/master/LICENSE) 详细文件 ## 常见问题 ### @allpro/react-router-pause 是什么？ React 路由器提供自定义同步导航屏蔽的帮助工具 ### 如何安装 @allpro/react-router-pause？ 在项目目录运行 npm install @allpro/react-router-pause，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：prop-types（\>=15）、react（\>=15）、react-dom（\>=15）、react-router-dom（\>=4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @allpro/react-router-pause 支持 TypeScript 吗？ 该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/allpro\_\_react-router-pause 是否存在。 ### @allpro/react-router-pause 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @allpro/react-router-pause 需要什么版本的 Node\.js？ package\.json 的 engines 字段要求 Node\.js \>=8。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。 ### @allpro/react-router-pause 可以商用吗？ @allpro/react-router-pause 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @allpro/react-router-pause 的下载量有多少？ 根据 npm 官方下载统计，@allpro/react-router-pause 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,154 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @allpro/react-router-pause 还在维护吗？ 最新版本 1\.1\.3 发布于 2019/05/18（7 年前）；至今共发布 12 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/04/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。