React Router 6.4 版本发布

经过几个月的开发，来自 Remix 的数据 API 已在 v6.4 中为 React Router 提供。

功能概述

网络是一个奇妙的地方，高度动态的购物体验、创意生产力软件 以及 超级基础但优秀的分类广告 都可以在同一个平台上实现。

虽然这些网站在本质上截然不同，但它们都有一个共同点：数据与 URL 耦合。这不仅仅是关于数据加载，它们都包含数据修改！React Router 6.4 采用新的约定、API 和自动行为来处理

• 将数据加载到组件中
• 更新组件中的数据
• 更新后自动重新验证数据
• 管理导航、修改和重新验证的竞争条件和中断
• 管理错误并向用户显示有用的内容
• 待处理 UI
• 使用 <React.Suspense> 的骨架 UI
• 等等...

为什么将路由和数据耦合？

大多数人意识到 <Link> 在底层渲染 <a href>，从而阻止了默认的浏览器行为（向服务器发送文档请求），而是使用 JavaScript 更改 URL。这就像

function Link({ to }) {
  return (
    <a
      href={to}
      onClick={(event) => {
        event.preventDefault();
        doReactRouterStuff();
      }}
    />
  );
}

你一定自己写过这种代码，只是用的是 <form>

function NewContactForm({ to }) {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        doYourThing();
      }}
    />
  );
}

你有没有想过...

我在这里阻止的是什么默认事件？

就像 <a href> 一样，<form action> 也会在用户提交时创建请求并将其发送到服务器。唯一的区别是表单可以发送一些数据，并且通常意味着你想要更新你的数据库。

换句话说，使用 HTML 表单的数据修改是路由事件。

很难解释当你的路由器理解完整的数据生命周期（包含数据加载 (<a href>) 和数据修改 (<form action>)）时，你的代码会变得多么简单和强大。你需要自己体验一下，所以今天就试一试吧

• 功能概述
• 教程

路由愉快！