表单也能“路由跳转”？React Router <Form> 真有点东西

🎙 欢迎来到《前端达人 · 播客书单》第 24 期。

今天我们聚焦前端开发中最常见的“表单处理”问题，从 React Router 的 <Form> 组件讲起，再深入原生 HTML 表单验证的本事和局限，为你打下强健的表单基础。

一、你真的“提交对了”表单吗？

开发中，我们常见这样几个场景：

• 🔄 表单一提交，整个页面刷新了？
• 🧩 还在用 onSubmit + e.preventDefault()？
• 💥 表单验证写了一堆 JS，却还是不灵光？

这些痛点，其实都是因为你还没有系统掌握 React Router 的 <Form> 和 HTML 的原生验证能力。

今天我们就来拆解两个关键问题：

• 如何让表单在客户端“优雅地跳转”？
• 原生验证到底香在哪，又为何总被嫌弃？

二、什么是 React Router 的 <Form> ？

一句话通俗解释：

<Form> 是 React Router 提供的表单封装组件，它让你不用 JS 也能把表单提交交给路由处理逻辑。

它做了什么事？

• ✅ 拦截表单的默认提交行为（你不用再写 e.preventDefault() 了）
• ✅ 把数据提交给你在路由里定义的 action 函数处理
• ✅ 全程在客户端路由内跳转，体验像“SPA”一样丝滑

三、如何用 <Form> ？

你只需要这样写 👇

import { Form } from 'react-router-dom';

function ContactPage() {
  return (
    <Form method="post" action="/thank-you-page">
      <input type="text" name="userName" />
      <button type="submit">提交</button>
    </Form>
  );
}

🧠 小提示：

• action 可以省略，默认提交到当前路由
• method 默认是 "get"，你也可以改成 "post"

四、Form 的数据去哪了？路由 action 告诉你！

表单提交后，数据会被送到你配置在路由里的 action 函数中 👇

export async function contactPageAction({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const userName = formData.get('userName') as string;

  return redirect(`/thank-you/${userName}`);
}

这像不像服务端的 POST 处理器？ 但这次，一切都发生在 React Router 的客户端逻辑里。

你甚至可以这样配置路由 👇

const router = createBrowserRouter([
  {
    path: '/contact',
    element: <ContactPage />,
    action: contactPageAction,
  },
  {
    path: '/thank-you/:name',
    element: <ThankYouPage />,
  },
]);

📦 action 函数让你把表单逻辑模块化、集中化，再也不用到处加 useState 管理表单状态了。

五、HTML 原生验证也能扛起一片天？

HTML5 提供了许多内置验证手段，无需 JS 就能搞定很多常见规则 👇

<input type="text" name="name" required />
<input type="email" name="email" required pattern="\S+@\S+\.\S+" />

🔍 常见属性说明：

• required: 强制必须填写
• type="email": 自动检查邮箱格式
• pattern: 用正则表达式自定义格式
• ✅ 浏览器会自动阻止无效提交 + 弹出验证提示

六、原生验证有什么优缺点？

✅ 优点：

• 实现超简单：你只要写属性，不写 JS
• 原生性能强：不触发 React 渲染，验证直接在浏览器层完成
• 辅助功能友好：屏幕阅读器、键盘导航全都兼容

❌ 局限也不少：

• ❌ 样式难改：默认提示 UI 不好看，不统一
• ❌ 逻辑太弱：做不了字段间联动或异步校验
• ❌ 跨浏览器不一致：提示文案风格五花八门
• ❌ 想自定义？只能手动 JS 处理（Constraint API）

💡 这也是为啥很多团队最后还是选择用 React Hook Form 或 Formik。

七、本章小结 & 展望

📌 今天我们学了两个关键组件：

• React Router <Form>：让前端提交逻辑模块化、自动接入路由逻辑
• HTML 原生验证：快速表单校验首选，适合简单场景

🧭 但面对更复杂的表单场景（比如：多字段联动、异步验证、错误提示统一管理），我们需要更强的工具 —— 明天的主角：

👉 React Hook Form：真正的表单管家！

如果你觉得这节播客有帮助，不妨点个【收藏】或【转发】，让更多同学写出更优雅的表单体验 💙

#React #React播客 #前端播客 #前端达人 #TypeScript