在前端开发中，路由的跳转是一个非常常见的操作。有些情况下，我们希望在路由跳转时能够提醒用户当前的页面还有未保存的内容，避免用户误操作导致数据丢失。而 npm 包 prevent-router-transition 则提供了一个简单的解决方案。
什么是 prevent-router-transition
prevent-router-transition 是一个基于 React Router 的中间件，在路由跳转时可以拦截用户的操作，提醒用户当前页面存在未保存的数据。
如何使用 prevent-router-transition
安装
使用 npm 安装 prevent-router-transition：
npm install prevent-router-transition --save
导入
在需要使用的页面组件中引入 prevent-router-transition：
import { withRouter } from 'react-router-dom';
import { Prompt } from 'prevent-router-transition';使用
在 render 函数中使用 Prompt 组件：
-- -------------------- ---- -------
-------- -
------ -
-----
-------
-------------------------------
----------------------
--
----------
------
--
-其中，when 属性表示是否对路由跳转进行拦截，message 属性表示提示用户的消息内容。
完整示例
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ---------- - ---- -------------------
------ - ------ - ---- ----------------------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - -
--------- -
----- ---
---- ---
------ ---
--
-------------- ------
--
---------------------- - ----------------------------------
----------------- - -----------------------------
-
------------------------ -
----- ------ - -------------
----- ----- - -------------
----- ---- - ------------
------------------------- -- --
--------- -
----------------------
------- ------
--
-------------- -----
----
-
------------------- -
-------------- - -------------------------------------
---------------
-------------- ------
---
-----------------------
-
-------- -
------ -
-----
-------
-------------------------------
----------------------
--
-----------------
----- -----------------------------
-------
---
------
-----------
-----------
--------------------------------
---------------------------------
--
--------
--- --
-------
---
------
-------------
----------
-------------------------------
---------------------------------
--
--------
--- --
-------
---
------
------------
------------
---------------------------------
---------------------------------
--
--------
--- --
------ ------------- ---------- --
-------
----------- --
-------------------------------- -
----- --------
--
-
-
----
---------
-------
------
--
-
-
------ ------- ---------------------在上述示例代码中，当用户未保存数据时，点击返回主页按钮时会弹出提示框，确认离开当前页面才能跳转主页。
结语
通过 prevent-router-transition，我们可以简洁地实现路由跳转的拦截、提醒功能，避免用户误操作导致数据丢失的情况发生。此外，在项目开发过程中，我们还可以根据实际需求，自定义 Prompt 组件的样式、行为等，以便更好地进行用户体验的优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c181e8991b448e8d91