JSSアプリでのルート処理とデータ取得

Version: 22.x

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecoreでは、コンテンツ作成者は、目的のURL構造に従ってコンテンツツリーを整理することで、各ページのURLを制御できます。

JSSアプリのルートは、サイトルートのWebサイトページやSitecoreアイテムに似ています。サンプルアプリでは、ライブラリの最も一般的なルーティングプラットフォームを使用して、アプリの実行時にルートを解決します。ルートは階層的に定義され、従来のページツリーアーキテクチャを形成します。このルーティングパラダイムをアプリに強制する必要はないため、必要に応じて、より複雑なルーティングパターンを実装できます。

たとえば、次のSitecoreツリー構造のコンテンツアイテムがページ/ルートであると仮定します。

RequestResponse

content
  site 1
    Home
      About
      Products
        Product X
        Product Y
        Product Z
  site 2
    Home
  site 3
    Home

Sitecoreは、これらのページを自動的に次のURLにマッピングします。

RequestResponse

https://site-1-hostname/
  https://site-1-hostname/about
  https://site-1-hostname/products
    https://site-1-hostname/products/product-x
    https://site-1-hostname/products/product-y
    https://site-1-hostname/products/product-y
https://site-2-hostname/
https://site-3-hostname/

JSSアプリは、Sitecore URLマッピングを完全にサポートすることが期待されています。

メモ

サイトのホスト名と、ページ名をURLセグメントにマップする方法のルール (大文字と小文字の区別、空白の置換など) は、XML構成で定義されます。ビジネス要件に基づいてこれをカスタマイズするかどうか、チームのSitecore開発者と話し合います。Sitecoreがルーティング要件を処理する方法をカスタマイズするには、フロントエンドとバックエンドの開発者間のコラボレーションが必要です。

カスタムルーティングを使用するには、カスタムルーティングサイトを編集できるようにするために、Sitecoreバックエンドに同じカスタムルーティングを実装する必要がある場合があります。可能な場合は、階層ルートを使用するようにしてください。

JSSアプリでルートを変更するには、RESTまたはGraphQLを使用してSitecoreエンドポイントに呼び出しを行い、新しいルートのデータを取得する必要があります。そのため、JSSサンプルアプリでは、次のように、データの取得や状態管理も処理するカスタムルーティング実装を定義します。

Next.jsアプリは、ファイルシステムベースのルーターとオプションのキャッチオールルートを使用します。
Reactサンプルアプリでは、/src/RouteHandler.jsファイルにRouteHandlerコンポーネントが実装されています。詳細については、「JSS Reactアプリでのルーティングと状態管理」を参照してください。
Angularサンプルアプリでは、changeRoute関数を使用します。選択したレンダリング方法に基づいて、アプリは /src/app/jss-context.server-side.service.tsファイルのサーバー側実装、またはsrc/app/jss-context.service.tsのクライアント側実装を使用します。詳細については、「 JSS Angularサンプルアプリでのルーティングと状態管理」を参照してください。
Vue.jsは /src/RouteHandler.vueにRouteHandlerコンポーネントを実装します。詳細については、「JSS Vue.jsサンプルアプリでのルーティングと状態管理」を参照してください。
React Nativeは、/src/dataService/dataService.connected.jsファイルにルーティングハンドラを実装します。詳細については、「 React Native JSSアプリでのルーティングと状態管理」を参照してください。

アプリケーションのデータフェッチ機能をカスタマイズするには、カスタムデータフェッチャーを使用するか、Sitecoreレイアウトサービスを拡張するための戦略の1つを使用します。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、