在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

remix-run/react-router

菜单

平台适配

相关源文件

目的与范围

本文档概述了服务器端集成包，这些包使 React Router 能够在各种托管平台和服务器环境中运行。这些特定于平台的适配器建立在核心 React Router 包之上，可在不同环境中提供无缝的服务器端渲染 (SSR) 功能。

有关服务器端渲染概念的信息，请参阅 服务器端渲染。有关特定数据加载策略的信息，请参阅 数据水合与加载。

平台适配架构

React Router 中的平台适配遵循分层架构模式，其中专用包建立在更通用的包之上，以提供特定于平台的 Pinyin。

来源：packages/react-router-node/package.json1-105 packages/react-router-express/package.json1-85 packages/react-router-cloudflare/package.json1-75 packages/react-router-architect/package.json1-88 packages/react-router-serve/package.json1-70

平台适配包层级结构

平台适配遵循分层结构

来源：packages/react-router-node/package.json3-4 packages/react-router-express/package.json3-4 packages/react-router-cloudflare/package.json3-4 packages/react-router-architect/package.json3-4 packages/react-router-serve/package.json3-4

可用的平台适配

Node.js 集成 (@react-router/node)

Node.js 适配器为 Node.js 环境中的 React Router 提供了基础的服务器端抽象。它是其他基于 Node.js 的适配器的基础。

主要功能

  • HTTP 请求/响应处理
  • 流式响应支持
  • Session 存储抽象

依赖项

  • @mjackson/node-fetch-server：HTTP 请求处理
  • source-map-support：Source map 支持，以便更好地报告错误
  • undici：用于发起请求的 HTTP 客户端

要求

  • Node.js 20.0.0 或更高版本

来源：packages/react-router-node/package.json1-105

Express 集成 (@react-router/express)

Express 适配器提供了与 Express.js Web 服务器应用程序的集成。

主要功能

  • 用于处理 React Router 请求的 Express 中间件
  • 与 Express 请求/响应对象的集成

依赖项

  • @react-router/node：Node.js 平台抽象

使用模式：Express 适配器通常用作 Express 应用程序中的中间件。

来源：packages/react-router-express/package.json1-85

Cloudflare 集成 (@react-router/cloudflare)

Cloudflare 适配器使 React Router 应用程序能够在 Cloudflare Workers 上运行。

主要功能

  • 与 Cloudflare Workers 运行时的集成
  • 针对 Cloudflare 特定 API 的适配器

要求

  • Cloudflare Workers 环境
  • @cloudflare/workers-types 用于 TypeScript 支持

来源：packages/react-router-cloudflare/package.json1-75

Architect 集成 (@react-router/architect)

Architect 适配器提供了与 AWS Architect 无服务器框架的集成。

主要功能

  • AWS Lambda 函数处理
  • 与 API Gateway 集成

依赖项

  • @architect/functions：Architect 无服务器函数
  • @types/aws-lambda：AWS Lambda 的类型定义
  • @react-router/node：Node.js 平台抽象

来源：packages/react-router-architect/package.json1-88

生产服务器 (@react-router/serve)

Serve 包为 React Router 应用程序提供生产级服务器。

主要功能

  • 即用型生产服务器
  • 压缩中间件
  • 通过 Morgan 进行日志记录
  • 端口管理

依赖项

  • @react-router/express：Express 服务器处理程序
  • @react-router/node：Node.js 平台抽象
  • compression：响应压缩
  • express：Web 服务器框架
  • morgan：HTTP 请求日志记录器

CLI 用法：该包包含一个用于启动生产服务器的 CLI 工具。

来源：packages/react-router-serve/package.json1-70

与开发工具集成

平台适配与 React Router 的开发工具配合使用，可提供全面的开发体验。

来源：packages/react-router-dev/package.json1-149 packages/create-react-router/package.json1-76

特定平台配置

每个平台适配可能需要特定的配置才能在其环境中正常运行。下表显示了每个平台的关键配置选项

平台配置文件关键设置
Node.jsreact-router.config.tsssr, dataStrategy
ExpressExpress 应用配置中间件配置、静态文件路径
Cloudflarewrangler.tomlWorkers 配置、环境变量
Architect.arc 文件Lambda 函数定义、API Gateway 路由
服务命令行参数端口、公共目录、环境

来源：packages/react-router-dev/package.json15-32

服务器请求处理流程

下图说明了服务器端渲染期间请求如何通过平台适配器流转

来源：packages/react-router-node/package.json71-75 packages/react-router-express/package.json51-53 packages/react-router-cloudflare/package.json47-52

常见实现模式

平台适配遵循通用实现模式，以在不同环境中提供一致的行为

  1. 请求/响应抽象：每个平台适配都为平台的请求/响应对象提供了抽象。

  2. 环境检测：适配器会检测其所处的环境并据此进行配置。

  3. 错误处理：所有适配器都使用一致的错误处理模式。

  4. 流管理：在适用情况下，提供对流式响应的支持。

  5. 会话管理：在相关情况下，提供会话管理功能。

来源： packages/react-router-node/package.json71-75 packages/react-router-cloudflare/package.json47-52

平台要求

所有平台适配器都需要 Node.js 20.0.0 或更高版本，特定环境除外。

  • Cloudflare：需要 Cloudflare Workers 环境
  • Architect：需要 AWS Lambda 环境
  • Express：需要 Express 4.17.1 或更高版本

此外，所有适配器都与 react-router 存在对等依赖，部分还具有可选的 TypeScript 依赖。

来源： packages/react-router-node/package.json93-95 packages/react-router-express/package.json75-77 packages/react-router-cloudflare/package.json65-67 packages/react-router-architect/package.json78-80 packages/react-router-serve/package.json59-61