特殊组件

本指南假设您了解路由在 PWA Kit 网店中的工作原理。要了解更多信息，请参阅我们的路由指南。

PWA Kit React SDK 包括以下特殊组件：AppConfig、App、Error 和 Document。

每个特殊组件的默认实现可以被您自己的自定义版本覆盖，以便您可以跨多个页面配置和自定义网店的行为。

我们来分别考察每个特殊组件：

AppConfig 组件位于 React 应用程序中组件层次结构的顶部附近。从这个位置，它允许您插入代码来配置和支持应用程序范围的功能，例如状态管理或组件主题。在 Retail React App 中，ChakraProvider 组件插入 AppConfig 以使主题值（用于颜色、间距等）可用于所有 Chakra UI 组件。

AppConfig 组件还允许您扩展参数集，这些参数集传递给通过 getProps 函数由 routeComponent 增强的所有组件。要添加这些参数，请定义称为 extraGetPropsArgs 的函数作为 AppConfig 组件的属性。

Retail React App 使用 extraGetPropsArgs 函数为通过 routeComponent 访问增强的所有组件提供对象，以便与 Salesforce Commerce API 交互：

PWA Kit React SDK 中的 AppConfig 组件版本没有多大作用，除非覆盖该版本。要覆盖 AppConfig 的 SDK 版本，请在 app/components/_app-config/index.jsx 定义文件。新生成的 PWA Kit 项目已经包含此文件以帮助您入门。

App 组件是 AppConfig 组件的子组件。其主要目的是包含贯穿整个 React 应用布局和 UI 的任何组件，例如页眉、页脚和侧边栏。

App 组件还通过 routeComponent 函数得到增强。如果将 getProps 函数定义为 App 组件的属性，则在呈现 routes 数组中的任何组件时都会调用它。将该函数用于您希望在每个页面上运行的任何逻辑。

与 AppConfig 一样，App 组件的默认版本存在于 PWA Kit React SDK 中，我们鼓励您将其覆盖。要覆盖 App 的 SDK 版本，请在 app/components/_app/index.jsx 中定义文件。新生成的 PWA Kit 项目已经包含此文件以帮助您入门。

为新生成的项目实施的一些 App 功能包括：分析跟踪、离线检测和 SkipNavLink 可访问性组件。

在以下任一条件下，Error 组件将代替 App 组件呈现：

用户请求在 routes 数组中找不到的路径。
routes 数组中的组件在其 getProps 函数中引发错误。
routes 数组中的组件在渲染期间引发错误。

返回 Error 组件时，响应标头中还会包含 HTTP 404 状态。

与其他特殊组件一样，PWA Kit React SDK 包含 Error 组件的默认版本，我们鼓励您将其覆盖。要覆盖 Error 的 SDK 版本，请在 app/components/_error/index.jsx 定义文件。新生成的 PWA Kit 项目已经包含此文件以帮助您入门。

通过覆盖 Error 组件，您可以执行诸如为您的品牌自定义错误页面、添加重定向以及将错误作为分析事件进行跟踪等操作。

Document 组件定义应用程序周围的 HTML，例如 <html>、<head>和 <body> 标签。

与其他特殊组件一样，PWA Kit React SDK 包含默认版本的可被覆盖 Document 组件。但是，在这种情况下，我们不建议您覆盖它。但是，如果您需要对应用程序进行细粒度控制，则可以在 Document 定义文件来覆盖 app/components/_document/index.jsx。新生成的 PWA Kit 项目不包含此文件。

我们建议不要覆盖 Document 组件，而是使用 React Helmet 库来修改 Document 中的 HTML 标签，例如 <head>。