React Router 6.4 版本發布

經過數月的開發，Remix 的資料 API 終於在 React Router v6.4 中登場。

功能概覽

網路是一個美好的地方，高度動態的購物體驗、創意的生產力軟體和 超級基本但優秀的分類廣告 都可以在同一個平台上實現。

雖然這些網站截然不同，但它們都有一個共同點：與 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>)）時，您的程式碼會變得更加簡單和強大，這很難解釋。您必須親身體驗一下，所以今天就來試試吧！

• 功能概覽
• 教學

路由愉快！