React Router 导航拦截机制深度解析-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00626/article/details/148324548

React Router 导航拦截机制深度解析

react-router remix-run/react-router: 是一个开源的 React 路由库，用于构建 React 应用的路由系统。它提供了一套简洁的 API 和多种路由模式，可以帮助开发者快速实现路由功能，提高应用的可维护性。特点包括易于使用、模块化设计、支持多种路由模式等。项目地址: https://gitcode.com/gh_mirrors/re/react-router

前言

在现代单页应用(SPA)开发中，表单填写是常见的用户交互场景。当用户在填写重要表单时，如果意外离开页面可能导致数据丢失，这会给用户带来糟糕的体验。React Router 提供了强大的导航拦截功能，可以帮助开发者优雅地处理这种情况。

核心概念：useBlocker

React Router 的 useBlocker 钩子是实现导航拦截的核心工具。它允许开发者在特定条件下阻止用户离开当前页面，通常用于以下场景：

表单数据已修改但未保存
文件上传未完成
重要操作正在进行中

实现步骤详解

1. 基础表单设置

首先创建一个包含表单的路由组件，这里以联系人表单为例：

import { useFetcher } from "react-router";
import type { Route } from "./+types/contact";

export async function action({ request }: Route.ActionArgs) {
  const formData = await request.formData();
  const email = formData.get("email");
  const message = formData.get("message");
  // 这里通常会有数据验证和保存逻辑
  return { ok: true };
}

export default function Contact() {
  const fetcher = useFetcher();

  return (
    <fetcher.Form method="post">
      <p>
        <label>
          邮箱: <input name="email" type="email" />
        </label>
      </p>
      <p>
        <textarea name="message" />
      </p>
      <p>
        <button type="submit">
          {fetcher.state === "idle" ? "发送" : "发送中..."}
        </button>
      </p>
    </fetcher.Form>
  );
}

2. 跟踪表单脏状态

为了判断用户是否修改了表单内容，我们需要跟踪表单的"脏状态"(dirty state)：

const [isDirty, setIsDirty] = useState(false);

<fetcher.Form
  method="post"
  onChange={(event) => {
    const email = event.currentTarget.email.value;
    const message = event.currentTarget.message.value;
    setIsDirty(Boolean(email || message));
  }}
>
  {/* 表单内容 */}
</fetcher.Form>

3. 实现导航拦截

使用 useBlocker 钩子实现导航拦截：

import { useBlocker } from "react-router";

const blocker = useBlocker(
  useCallback(() => isDirty, [isDirty])
);

4. 添加确认对话框

当导航被拦截时，应该给用户明确的提示和选择：

{blocker.state === "blocked" && (
  <div className="confirmation-dialog">
    <p>您有未保存的更改，确定要离开吗？</p>
    <div className="button-group">
      <button onClick={() => blocker.proceed()}>
        离开
      </button>
      <button onClick={() => blocker.reset()}>
        留在此页
      </button>
    </div>
  </div>
)}

5. 表单提交后的处理

表单成功提交后，应该重置拦截状态：

useEffect(() => {
  if (fetcher.data?.ok) {
    if (blocker.state === "blocked") {
      blocker.reset();
    }
  }
}, [fetcher.data]);

进阶技巧

自动处理表单提交后的导航

如果希望在表单提交后自动继续被拦截的导航：

useEffect(() => {
  if (fetcher.data?.ok) {
    if (blocker.state === "blocked") {
      blocker.proceed(); // 继续被拦截的导航
    }
  }
}, [fetcher.data]);

表单重置优化

使用 ref 来重置表单状态：

const formRef = useRef<HTMLFormElement>(null);

useEffect(() => {
  if (fetcher.data?.ok) {
    formRef.current?.reset();
    setIsDirty(false);
  }
}, [fetcher.data]);