前回作成をしたパンくずリストのコンポーネントですが、多言語の時の動作はどういう動きをするでしょうか？今回はその部分も想定したコンポーネントに更新していきます。

日本語での動作を確認する

前回のコードに対して、データがあった時の処理の部分で、sitecoreContext から言語を取得できるか確認をします。

typescript if (data) { return ( <> <div className="component-content">{generateBreadcrumbList(data.item.ancestors)}</div> <div>id: {sitecoreContext.language}</div> </> ); }

日本語のリソースをそろえた時の結果は以下のように表示されます。

コンポーネントを更新する

追加したコードで言語を確認することができていますが、URL に関しては GraphQL が返したデータをもとに URL を生成しているため、パスに ja-JP が入っていない状況です。en に関しては / を、そうではない場合は locale を追加するようにコンポーネントを更新します。

まず呼び出しをする関数に対して、locale を利用して URL を調整するコードを追加します。

typescript function generateBreadcrumbList(ancestors: Ancestor[], locale: string): JSX.Element { const reversedAncestors = ancestors.reverse(); const baseUrl = locale === 'en' ? '' : `/${locale}`; const ancestorListItems = reversedAncestors.map((ancestor: Ancestor, index: number) => { return ( <li key={index}> <a href={baseUrl + ancestor.url.path}>{ancestor.field.value}</a> </li> ); });

これで、en の場合は何も追加せず、 ja-jp の時には /ja-JP が追加されるようになります。

続いて呼び出しをしているコードの部分で locale となる言語を渡します。

typescript const { sitecoreContext } = useSitecoreContext(); const locale = sitecoreContext.language || 'en'; if (data) { return ( <> <div className="component-content"> {generateBreadcrumbList(data.item.ancestors, locale)} </div> </> ); }

これで HTML を生成する時にロケールを URL に追加して表示ができるようになりました。実行します。

まとめ

コンポーネントを作成する際には GraphQL 側では $language を利用してその言語のデータを取得、またコンポーネント側で sitecoreContext.language から言語を取得することで、URL に関する調整ができました。