合并 Remix 和 React Router

我们一直在搭建一座桥梁。您可以在 React Conf 上听到 Ryan 谈论此公告 🎥

近四年来，我们一直在开发 Remix，这是一个基于 Web 标准构建的全栈框架，可帮助您构建更好的网站和应用程序。React Router 一直是 Remix 在 React 本身之后最大的依赖项。这两个项目如此紧密地结合在一起，以至于我们更新了 React Router以包含 Remix 优秀的加载模式，之后重写了 Remix以更直接地依赖 React Router。

数百万个项目正在使用 React Router，其中许多项目构建在 Create React App (CRA) 之上。如今，CRA 不再推荐，并且React 文档建议使用框架。由于 Remix 一直以来实际上都是“React Router：框架”，因此我们希望为所有这些 React Router 项目创建一个桥梁，以便能够升级到 Remix。

事实证明，我们把这座桥建得太好了，特别是在引入了我们的 Vite 插件和SPA 模式之后。我们发现自己一直在看 Remix，然后看 React Router，再回头看 Remix，我们再也无法区分它们之间的区别了。

所以我们正在重新混合 React Router（再次）。

实际上，我们做的不仅仅是这些。Remix 一直只是 React Router 之上的一层——而且这层一直在缩小。现在它变得如此之小，以至于我们只需要将其消除。我们计划作为Remix v3发布的内容现在将作为React Router v7发布。

TL;DR：React Router 将在下一个版本中获得 Remix 中的所有优秀功能（以及更多！）Remix 用户应该继续使用 Remix，并在发布 React Router v7 时通过更改导入来切换到它。我们对 Remix 包的未来计划感到兴奋，我们将在第一时间与大家分享。

阅读我们的后续文章React 19 的增量路径，以深入了解此决定并解答常见问题。

以下是故事

React Router 的 10 年

我们刚刚度过了React Router 第一个提交的 10 周年纪念日 🎉

Ryan 和 Michael 已经构建和维护 React Router 很长时间了，它经历了几个主要的迭代。在最初的 6 年里，React Router 只是一个开源项目，Michael 和 Ryan 只有在 React Training 教人们如何使用 React 之间的休息时间才会进行开发。快进到一场全球性的大流行病，迫使他们找到一种新的养家糊口的方式，于是他们两人决定构建“React Router：框架”（更广为人知的是 Remix）。4 年后以及1 次收购之后，他们现在拥有一个由 6 名工程师组成的团队，积极参与 React Router 和 Remix 的开发（以及 1 名发布相关推文的人）。

10 年来，React Router 一直是 React 生态系统中使用最广泛的依赖项之一。仅仅查看使用 React Router 的公共 GitHub 存储库的数量，就让我们 Remix 团队对这些项目承担了巨大的责任。

Shopify 本身也严重依赖 React Router。事实上，我们目前有一个 500 万行代码的应用程序，它是 Shopify 业务的核心，运行在 React Router 上。这仅仅是众多使用 React Router 的 Shopify 站点之一。

构建更好的网站

虽然 React Router 很好，但 Remix 的创建是为了提供一种更好的方法来使用 React 构建网站。Remix 为您提供了一些非常棒的功能，我们希望这些数百万个项目能够利用这些功能。

• 自动代码分割
• 简化的数据加载
• 表单操作、服务器操作
• 简化的待定状态
• 乐观 UI
• 服务器渲染
• 静态预渲染
• RSC（即将推出）

过去，Create React App (CRA) 是引导 React 应用程序最简单的方法。它处理并隐藏了设置 webpack 和 Babel 的复杂性，并且当 React 中添加新功能时，react-scripts 从一开始就支持它们。

但是，CRA 没有提供路由器、数据获取解决方案或上面列出的任何功能。这不是 CRA 的目的。它是一个简单的 React 应用程序启动器，允许您使用您喜欢的任何 React 生态系统库。许多使用 CRA 引导的项目使用 React Router 进行路由，这意味着有大量“CRA 应用程序”也是“React Router 应用程序”。

如今，CRA 不再是创建 React 应用程序的推荐方法，而且已经有一段时间了。自从 CRA 上次提交以来，已经快一年了，并且提交次数在之前已经大大减少。在这一点上，CRA 被认为是未维护的，并且React 文档甚至不建议使用它。

因此，我们不仅对所有 React Router 应用程序负有巨大的责任，而且我们也相信，对于一个好的 CRA 替代品存在巨大的、未满足的需求。

同时，Vite 的普及程度大幅提高，它提供了快速的开发体验、优化的构建以及丰富的插件生态系统和创作体验。

Vite 提供了一个默认的 React 启动器，并且对于许多人来说，它已经成为了“CRA 替代品”。这是好事，但它仍然没有提供 React 文档建议的解决方案，而且它肯定没有提供我们认为 React 应用程序应该关心的所有功能。事实上，Vite 团队甚至更希望 CRA 替代品来自 React 社区内部。

去年秋天，我们决定押注 Vite并开始弃用我们的经典编译器。Vite 团队和社区非常接受和支持我们，我们很高兴成为众多在 Vite 之上构建优秀项目的团队之一。

切换到 Vite 使 Remix 能够吸引更多用户。我们还添加了SPA 模式和客户端数据，以创建尽可能好的桥梁，说服使用 React Router 应用程序的开发人员迁移到 Remix并利用它提供的所有优秀功能。毕竟，在这一点上，Remix 不就是 React Router + Vite 吗？

无需重写即可使用现代 React

以下陈述存在问题：

说服使用 React Router 应用程序的开发人员迁移到 Remix

问题在于这个有两个音节、需要多个冲刺、需要呼吁提供 T 恤尺寸、让经理感到恐惧、跨季度进行的词语 **迁移** 😱

到目前为止，我们的策略一直是使从 React Router 应用程序到 Remix 的桥梁如此无缝，以至于感觉不到像迁移一样。根据在其他项目的个人经验，我们都希望保持我们的扑克规划简短。问题在于，无论我们在构建这座桥梁方面做得多么出色，它仍然感觉像重写一样。在情感上，将导入从一个包更改为另一个包感觉就像重写一样，否则它将只是一个主要版本升级。

所以我们想到：如果它只是一个主要版本升级呢？

事实证明，我们把这个Remix ➡️ React Router桥梁建得太好了，现在 Remix 和 React Router 基本上是一样的（Vite 除外）。如果我们只为 React Router 发布一个 Vite 插件，这两个项目就可以合并。

所以这就是我们要做的。

我们希望 React 生态系统中的每个人都能访问

• 自动代码分割
• 简化的数据加载
• 表单操作、服务器操作
• 简化的待定状态
• 乐观 UI
• 服务器渲染
• 静态预渲染
• RSC（即将推出）

我们希望 Shopify 的那个 500 万行代码的应用程序、GitHub 上的 700 多万个 React Router 项目以及我们不知道的所有其他站点能够轻松升级并利用 React 提供的最新功能。我们希望创建新的 React 应用程序变得简单且可扩展。

这就是为什么我们只是将其作为一个主要版本升级。

接下来是什么？

我们正在努力稳定 React Router v7，并将分享早期版本以收集反馈。我们决心使升级尽可能顺利。Remix 和 React Router 都利用未来标志，一般的升级流程将是

1. 升级到 Remix 或 React Router 的最新次要版本
2. 启用所有功能标志
3. 在您的 package.json 中将 @remix-run/* 依赖项更改为 react-router
4. 将 @remix-run/* 导入替换为 react-router

我们致力于使这两个升级路径都不中断，除了更改导入之外，假设您启用了所有未来标志并正在使用 Vite。

我们还计划提供代码修改和专门指南，以提供尽可能简单、无痛的升级路径。

如果您有任何疑问，请随时在 Discord 上联系我们。

Remix 发生了什么

您可能想知道：“Remix 会发生什么？”这是一个合理的问题。

如果我目前正在使用 Remix，这意味着什么？

如果您目前正在使用 Remix，请继续使用它！我们将在准备 React Router v7 的过程中发布更多未来标志并继续改进 Remix。一旦我们发布 React Router v7，我们将提供一个代码修改来自动更新您所有的导入。

- import { Link } from `@remix-run/react`
+ import { Link } from `react-router`

如果我之前很高兴尝试 Remix，这意味着什么？

继续使用它！升级到 React Router v7（一旦准备就绪）只需进行一个代码修改即可更改所有导入（请参见上文）。

如果您更愿意使用 React Router 6，那也很好。我们已经将 Remix 中的许多好东西移植到了 React Router 中。但是，在我们在 React Router v7 中发布它们之前，您将无法获得 Remix 提供的许多开箱即用的功能，例如 SSR、预取或 Vite 插件。

如果我正在使用 React Router 并计划迁移到 Remix，这意味着什么？

我们正在全力发布 React Router v7 并尽快将其交付到您的手中。如果您无法等到 v7 并想要 Remix 附带的所有惊人功能，请继续升级到它。从 Remix 到 React Router 的迁移将只是一个更新导入的代码修改。如果您可以等待，那么请密切关注我们完成 React Router v7 并为您提供所有这些新功能。

关于 Remix 品牌，它不会消失。我们是 Remix 团队，React Router 是 Remix 的一个项目，我们还有很多非常令人兴奋的计划，超越 React Router，我们迫不及待地想与大家分享。Remix 的软件包将小睡一会儿。目前，Remix 团队将专注于发布 React Router v7，并提供尽可能顺畅的升级流程。

对于任何存在 4 年（或 10 年）的项目，你都会在过程中学到很多东西，并且不得不与一种冲动作斗争，这种冲动就是想抛弃一切从头开始，摆脱早期 API 和设计决策的包袱。最重要的是，我们相信 React Server Components 确实改变了游戏规则，但它们是一种新的基础组件，就像所有人一样，我们正在探索构建它的最佳方法。我们现在还不能多谈（！），但我们有一些想法，可以让 Remix 变得更加强大，甚至更加以服务器为中心，你可以使用 React Router 项目构建在其之上。

我们一直在酝酿一些非常令人兴奋的想法，我们很高兴将来能与大家分享。但现在，我们将继续专注于稳定 React Router v7，以便你尽快开始升级你的项目。所以，订阅（或保持订阅）我们的时事通讯，关注我们的 Twitter，并加入我们的 Discord，以了解所有最新信息。

我们比以往任何时候都更有活力，继续帮助人们构建更好的网站。