Express 集成

相关源文件

• packages/create-react-router/package.json
• packages/react-router-architect/package.json
• packages/react-router-cloudflare/package.json
• packages/react-router-dev/package.json
• packages/react-router-express/package.json
• packages/react-router-fs-routes/package.json
• packages/react-router-node/package.json
• packages/react-router-serve/package.json

本文档详细介绍了如何将 React Router 与 Express.js Web 服务器应用程序集成。Express 集成允许您在 Express 应用程序中使用 React Router 的服务器端渲染和数据加载功能。有关通用的 Node.js 集成，请参阅 Node.js 集成。

概述

@react-router/express 包提供了 Express 中间件，用于在服务器上处理 React Router 应用程序。它建立在 @react-router/node 提供的 Node.js 抽象之上，并为在 Express 环境中实现 React Router 应用程序的服务器端渲染 (SSR) 提供了一种简化的方法。

来源

• packages/react-router-express/package.json
• packages/react-router-node/package.json

安装与设置

要使用 React Router 的 Express 集成，您需要同时安装 Express 集成包和 Express 本身

此包依赖于核心 React Router 包和 Node.js 集成包，它们将作为依赖项自动安装。

来源

• packages/react-router-express/package.json:51-53
• packages/react-router-express/package.json:65-69

架构

Express 集成位于您的 Express 应用程序和 React Router 的核心功能之间，提供了一个中间件，该中间件处理传入的 HTTP 请求，并使用 React Router 在服务器上渲染适当的路由。

来源

• packages/react-router-express/package.json
• packages/react-router-node/package.json

核心API

createRequestHandler

@react-router/express 的主要导出是 createRequestHandler 函数，它创建一个 Express 中间件函数，可用于处理 React Router 服务器渲染。

基本用法

来源

• packages/react-router-express/package.json:14-33

请求处理程序选项

createRequestHandler 函数接受一个包含多个选项的配置对象

选项	类型	描述
routes	RouteObject[]	您的应用程序的路由定义
serverBuild	ServerBuild	可选的服务器构建对象（用于生产构建）
basename	字符串	路由器的可选基础 URL 路径
future	对象	用于启用实验性功能的 Future 标志
getLoadContext	(req, res) => any	用于向加载器和操作提供自定义数据的函数

来源

• packages/react-router-express/package.json

与数据加载器和操作集成

React Router 的 Express 集成完全支持数据加载器和操作，允许您在渲染之前在服务器上获取和修改数据。

在您的路由模块中，您可以定义将在服务器上执行的加载器和操作

来源

• packages/react-router-express/package.json
• packages/react-router-node/package.json

服务器上下文

Express 集成允许您通过 getLoadContext 选项将自定义上下文传递给加载器和操作

此上下文将传递给所有加载器和操作，使它们能够访问数据库、身份验证信息或其他服务器实用程序等服务器端资源。

来源

• packages/react-router-express/package.json

错误处理

Express 集成处理在路由匹配、加载器执行或渲染过程中发生的错误。默认情况下，如果加载器或组件抛出错误，React Router 将渲染最近的错误边界。这些错误也会被正确序列化并发送到客户端进行水合。

对于 Express 特定的错误处理，您可以在 React Router 的错误边界之外使用标准的 Express 错误中间件

来源

• packages/react-router-express/package.json

生产部署

对于生产部署，React Router 提供了 @react-router/serve 包，该包建立在 Express 集成之上，并包含其他生产就绪的功能，如压缩和日志记录。

您可以使用此包作为命令行工具来提供已构建的 React Router 应用程序

来源

• packages/react-router-serve/package.json:38-45
• packages/react-router-serve/package.json:17-19

性能考量

在使用 React Router 和 Express 时，请考虑以下性能优化措施

1. 静态资源服务：在 React Router 中间件之前，使用 Express 的静态中间件以适当的缓存标头服务静态资源。

2. 压缩：使用压缩中间件（如 compression）来减小响应大小。

3. 缓存：为您的数据加载器实施适当的缓存策略，特别是对于昂贵的数据库查询。

4. 响应流式传输：对于大型响应，可以考虑使用 React 18 的流式传输功能。

来源

• packages/react-router-serve/package.json:38-45

相关包

React Router 的 Express 集成与 React Router 生态系统中的其他几个包协同工作

包	目的
@react-router/node	核心 Node.js 平台抽象（必需）
@react-router/serve	基于 Express 集成的生产就绪服务器
@react-router/architect	AWS Architect 集成（Express 的替代方案）
@react-router/cloudflare	Cloudflare Workers 集成（Express 的替代方案）

如果您使用的是不同的 Node.js 服务器框架或云平台，请检查 React Router 是否提供了针对它的特定集成。

来源

• packages/react-router-node/package.json
• packages/react-router-serve/package.json
• packages/react-router-architect/package.json
• packages/react-router-cloudflare/package.json

结论

React Router 的 Express 集成提供了一种强大的方式，可以使用 Express.js 在服务器上渲染 React Router 应用程序。它与 React Router 的数据获取功能和服务器端渲染功能无缝集成，使您能够构建功能齐全的服务器渲染 React 应用程序。