react-router 的 useBlocker 路由拦截

开始之前

路由拦截功能是很常见的,功能。比如:我们的表单没有填写完毕,用户就就要跳转,此时我们需要拦截与确认。在 React-router v6 之前提供了 Prompt 组件用于拦截跳转。React Router v6.19.0 版本之后,开始移除 unstable_ 不稳定的前缀变的正式可用

remix 中 useBlocker 从 v2.3.0 开始

Remix 中 useBlocker 钩子函数,从 v2.3.0 开始能够正式使用。

useBlocker 的用法

useBlocker 是一个钩子函数,此钩子函数需要接受一个函数作为参数(或者是 boolean 的值),以下是 useBlocker 相关的 TS 类型:

ts 复制代码
export declare function useBlocker(shouldBlock: boolean | BlockerFunction): Blocker;

export type BlockerFunction = (args: {
    currentLocation: Location;
    nextLocation: Location;
    historyAction: HistoryAction;
}) => boolean;

export type Blocker = BlockerUnblocked | BlockerBlocked | BlockerProceeding;

interface BlockerBlocked {
    state: "blocked";
    reset(): void;
    proceed(): void;
    location: Location;
}
interface BlockerUnblocked {
    state: "unblocked";
    reset: undefined;
    proceed: undefined;
    location: undefined;
}
interface BlockerProceeding {
    state: "proceeding";
    reset: undefined;
    proceed: undefined;
    location: Location;
}

以上是 useBlocker 相关的类型,这些类型

特点

  • useBlocker 拦截的是通过 react-router 导航
  • 如果手动点击浏览器的导航按钮,useBlocker 是不能拦截的

Remix 中使用示例

tsx 复制代码
import React from "react";
import { Button, Form, Modal } from "antd";
import { Link, useBlocker } from "@remix-run/react";


export default function ImportantForm() {
  const [value, setValue] = React.useState("");

  const blocker = useBlocker(
    ({ currentLocation, nextLocation }) =>
      value !== "" && currentLocation.pathname !== nextLocation.pathname
  );

  return (
    <Form method="post">
      <label>
        请输出数据
        <input
          name="data"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </label>
      <button type="submit">Save</button>
      <br />
      <Button>
        <Link to="/">home</Link>
      </Button>

      {blocker.state === "blocked" ? (
        <div>
          <Modal
            title="Are you sure you want to leave?"
            open={blocker.state === "blocked"}
            onOk={() => blocker.proceed()}
            onCancel={() => blocker.reset()}
          >
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </div>
      ) : null}
    </Form>
  );
}

小结

本文主要介绍 React Router 的 useBlocker 的用法,以及基本使用案例。useBlocker 在 v6.19.0 开始正式使用,相比对路由拦截有需求的朋友这个 api 一定非常受用。

相关推荐
调试人生的显微镜5 分钟前
iOS 代上架实战指南,从账号管理到使用 开心上架 上传IPA的完整流程
后端
本就一无所有 何惧重新开始9 分钟前
Redis技术应用
java·数据库·spring boot·redis·后端·缓存
九十一18 分钟前
websocket的连接原理
前端·javascript
低音钢琴22 分钟前
【SpringBoot从初学者到专家的成长11】Spring Boot中的application.properties与application.yml详解
java·spring boot·后端
念你那丝微笑27 分钟前
vue实现批量导出二维码到PDF(支持分页生成 PDF)
前端·vue.js·pdf
越千年30 分钟前
用Go实现类似WinGet风格彩色进度条
后端
Renounce32 分钟前
《Android Handler:线程间通信的核心实现》
前端
CAD老兵34 分钟前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
前端老宋Running34 分钟前
微信小程序的操作日志收集模块
前端
CAD老兵38 分钟前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js