React 19 的漸進式路徑：React Conf 後續追蹤

更新（2024 年 12 月）： React Router v7 已發布！

我們現在建議所有新專案都從 React Router v7 開始，並升級現有的 Remix 應用程式。

---

上週，我發表了一場關於 React Router 和 Remix 的演講，地點在 React Conf，而且我們在這裡發布了一份公告。現在塵埃落定，我想針對該公告中的決策提供更多見解，並回答一些常見問題。

重點摘要

關於 React Router

• React Router v6 到 v7 將會是無破壞性的升級
• 來自 Remix 的 Vite 外掛程式將在 v7 中加入 React Router
• Vite 外掛程式只是讓現有的 React Router 功能使用起來更方便，但並非使用 React Router v7 的必要條件
• v7 將同時支援 React 18 和 React 19

關於 Remix

• 原本應該是 Remix v3 的版本，將會是 React Router v7
• Remix v2 到 React Router v7 將會是無破壞性的升級
• Remix 將在未來的版本中以比以往更好的姿態回歸，並透過這些變更啟用漸進式採用策略

關於兩者

• React Router v7 帶有目前 Remix 或 React Router 中沒有的新功能：RSC、伺服器動作、靜態預先渲染，以及全面強化的型別安全

背景

Remix 變成了一個包裝器

Remix 的功能在歷史上一直會回到 React Router。事實上，在過去一年左右的時間裡，所有新功能都從 React Router 開始，而 Remix 只是簡單地呼叫它。

在這一點上，Remix 只是一個讓 React Router 更方便使用和部署的 Vite 外掛程式。在外掛程式之外，Remix 幾乎只是重新匯出 React Router。

將程式碼、文件、問題、討論和開發分散在兩個專案之間，不再具有任何技術上的目的。相反，它為我們增加了人為的開銷，並為使用者帶來困惑。

因此，我們正在將 Vite 外掛程式移至 React Router，並將其命名為 v7。

RSC 改變了 Remix

搭配 RSC 的 React 19 允許我們重新思考關於如何建構跨越堆疊中心的 React 應用程式的假設。它改變了路由、打包、資料載入、重新驗證、待處理狀態，幾乎所有的一切！

在試驗 RSC，並在 Hydrogen v1 中實際運行多年後，我們認為我們為 Remix 設計了一個比以往更簡單且更強大的新 API。在與來自 Shopify 的同事進行面對面預覽時，一位工程師悄悄地說：「哇，這真是太美了」。

我們也認為它很美，但它非常不同！（我們很快就會向您展示，但還不是現在。）

這個模型差異夠大，因此我們認為應該將其命名為其他名稱，以區別於今天的 Remix，並能夠透過平行運行這兩個版本來實現更簡單的漸進式採用。

但我們喜歡 Remix！這個品牌、這個社群、這個精神。

當 Remix 應用程式升級到 React Router v7 時，這會在您的 package.json 中騰出空間，以便平行運行目前和未來的 Remix，以實現未來的漸進式升級路徑。它也讓我們能夠保留名稱！

因此，儘管這看起來像是沒有必要的套件改組，但技術事實是，今天的 Remix 只是一個包裝器，而這個改組能夠實現最順暢的未來升級路徑。

常見問題

這對 React Router 意味著什麼？

React Router v7 不會要求使用 Vite。您可以像今天一樣繼續使用它。

只要您在當前的 v6 中的未來標誌上保持最新狀態，從 v6 升級到 v7 將會是無破壞性的升級。

如果您採用 Vite 外掛程式，您將可以輕鬆存取自動程式碼分割、SSR、RSC、靜態預先渲染、具有伺服器載入器、用戶端載入器、動作等的路由模組 API。透過將打包器與 React Router 中已有的功能結合使用，所有這些功能都是可能的。

再次針對 Reddit 上的使用者：如果您在當前的未來標誌上保持最新狀態，您可以直接升級到 v7，而不需變更任何內容。

升級到 v7 後，您可以採用 Vite 外掛程式，並逐步更新部分程式碼以利用它，但這不是必需的。

（有人注意到交錯結構嗎？Kent？）

這對 Remix 意味著什麼？

如果您在目前的 Remix 未來標誌上保持最新狀態，從 Remix v2 升級到 React Router v7 將會是無破壞性的升級。

當然，您需要將您的 package.json 更新為新的 React Router 套件，並更新應用程式程式碼中的匯入，但我們預期會有一個 codemod 來為您執行此操作。

我今天應該使用什麼？

我們建議您今天使用 Remix。如果您對伺服器渲染不感興趣，您可以部署單頁應用程式，或者利用 React 和 Remix 的伺服器功能，例如串流、伺服器載入器、動作等。

新功能和 React 19 的路徑

React 的未來涉及伺服器和建置工作流程，以利用 React 新的全堆疊組合故事。將您的 React Router 應用程式重寫為 Remix 或其他框架對我們來說不是一個足夠好的答案。

將 Vite 外掛程式移至 React Router 提供了一種方法，讓使用任一專案的應用程式可以在需要時逐步採用新功能，而無需處理今天運行良好的程式碼。功能包括：

• SSR
• RSC
• 伺服器動作
• 靜態預先渲染（包括 RSC）

您還將從路由配置、參數到載入器和動作資料，獲得全面的增強型型別安全性，甚至在應用程式中已知路徑的 <Link>、navigate 上獲得型別提示。

React 19 挑戰了過去 10 年的假設，這些變更為 React Router 和 Remix 提供了進入未來 10 年的漸進式路徑。

建置更好的網站！（漸進式地）