特殊コンポーネント

このガイドでは、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 と同様、PWA Kit React SDK には App コンポーネントのデフォルトのバージョンがあり、上書きすることを推奨します。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>、<head>、および <body> のタグなど、アプリケーション全体の HTML を定義します。

他の特殊コンポーネントと同様、PWA Kit React SDK には Document コンポーネントのデフォルトのバージョンがあり、上書きできます。ただし、この場合は上書きは 推奨しません 。しかしアプリケーションで粒度の細かいコントロールが必要な場合は、app/components/_document/index.jsx でファイルを定義して Document を上書きできます。新しく生成された PWA Kit プロジェクトには、このファイルは 含まれていません 。

Document コンポーネントを上書きする代わりに、React Helmet ライブラリを使用して Document の <head> などの HTML タグを変更することをお勧めします。