react-router 重新加回跳转拦截功能详解
前言
路由的跳转拦截，在一些表单页中尤为常见。场景：用户输入了一些信息后但未提交，为了防止用户误点击某个跳转链接导致所填的表单信息丢失，跳转之前会弹出一个提示，如 “信息未提交，请确认是否离开” 等字样。
事件经过
在 react-router v6 之前有提供一个 <Prompt /> 组件来拦截路由的跳转。而在 v6 中却不支持此功能了！社区一片哀嚎，经查在 v6 实验阶段是有此功能的，但在 v6.0.0 beta-7 中删除了此功能。在这个 issue 链接 中每个人都强烈要求需要此功能，但官方回复会在不久的将来添加，有需要的可以回退到 v5，基本所有人都表示 👎。然而这一等就是一年多，很多人这期间在 issue 中表示非常失望，这个不久的将来 到底还有没有了？终于在 v6.7.0 重新加入了此功能，原来不久的将来约等于一年。
v6 之前的版本如何拦截
在你需要拦截的页面添加 <Prompt /> 组件，我们在输入框中有值，且进行跳转页面时进行拦截。当 when 为 true 时，执行跳转会触发拦截操作，message 为提示。
function Home() {
const [value, setValue] = useState("");
return (
<div>
<Link to="/about" />
<input value={value} onChange={e => setValue(e.target.value)} />
<Prompt when={!!value} message="确认要离开吗" />
</div>
);
}
弹出的提示进行自定义，when 可以设置为一个函数，参数为 location 和 action(行为)，返回 string | boolean。返回 string 或 true 就是直接离开了。
function Home() {
const [value, setValue] = useState("");
const history = useHistory();
return (
<div>
<Link to="/about" />
<input value={value} onChange={(e) => setValue(e.target.value)} />
<Prompt
when={!!value}
message={(location, action) => {
Modal.confirm({
message: "确定要离开吗",
onOk: () => {
history.push(location.pathname);
},
});
return false;
}}
/>
</div>
);
}
v6.7.0+ 如何拦截
在这个版本中提供了一个 unstable_useBlocker 钩子，但在文档中是没有的（艹），需要自己去 examples 里找。useBlocker 传入的参数类似于上面的 when。
useBlocker 的参数为 boolean 或 函数返回 boolean，函数的类型如下：
(args: {
currentLocation: Location;
nextLocation: Location;
historyAction: HistoryAction;
}) => boolean
blocker 里的 state 为 blocked 时，说明当前正在进行拦截，此时弹出一个 Modal，点击确认就是进行跳转，点击取消就是不跳转。blocked 中还能获取到 location，可以根据你的需要来使用。
import { unstable_useBlocker as useBlocker } from "react-router-dom";
function Home() {
const [value, setValue] = useState("");
const blocker = useBlocker(!!value);
useEffect(() => {
if (blocker.state === "blocked") {
Modal.confirm({
message: "确认离开吗",
onOk: () => {
blocker.proceed?.();
},
onCancel: () => {
blocker.reset?.();
},
});
}
}, [blocker]);
return (
<div>
<Link to="/about" />
<input value={value} onChange={(e) => setValue(e.target.value)} />
</div>
);
}
吐槽
最后，就在这里吐槽一下吧。文档很烂，不支持搜索！且 v6.4 的后续版本中加入了很多 api，例如 action 和 loader 的概念，跟数据请求有关。但是我觉得很难用，路由库就应该只专注路由，应该跟它们的 remix 框架的发展有关吧。官方的权限控制例子也是不好用，很麻烦。下个文章会写在 v6 中如何优雅简单的管理权限。
以上就是react-router 重新加回跳转拦截功能详解的详细内容，更多关于react router 跳转拦截的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了详解react服务端渲染（同构）的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
React新扩展函数setState与lazyLoad及hook介绍
这篇文章主要介绍了React新扩展函数setState与lazyLoad及hook，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-12-12
这篇文章主要介绍了React如何实现像Vue一样将css和js写在同一文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
React Native 是目前流行的跨平台移动应用开发框架之一。本文介绍react native环境安装流程及遇到问题解决方法，感兴趣的朋友一起看看吧2021-05-05
本篇文章主要介绍了一个基于react的图片裁剪组件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
这篇文章主要介绍了react-navigation之动态修改title的内容，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了react-intl实现React国际化多语言的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要为大家详细介绍了React实现文件上传和断点续传功能的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
useCallback是用来帮忙缓存函数的,当依赖项没有发生变化时,返回缓存的指针,而props涉及到复杂对象类型都是通过指针来传递到,下面这篇文章主要给大家介绍了关于useCallback使用的相关资料,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了如何使用 React Hooks 重构类组件,本文就来通过一些常见示例看看如何使用 React Hooks 来重构类组件，需要的朋友可以参考下2022-07-07
最新评论