google / react-schemaorg

Type-checked Schema.org JSON-LD for React
Apache License 2.0
481 stars 19 forks source link

How to make BreadcrumbList with multiple breadcrumb trails #47

Open StewartJ-SSG opened 1 year ago

StewartJ-SSG commented 1 year ago

According to the Google docs here it should be possible to have multiple BreadcrumbList items in an array inside the script tag. However, this doesn't seem possible with react-schemaorg since you cannot pass an array of objects to jsonLdScriptProps() you can only pass a single object.

What I would like to do is:

  const data = jsonLdScriptProps<BreadcrumbList[]>(
[{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "/#breadcrumlist",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "Articles",
        item: "https://example.com/",
      },
      {
        "@type": "ListItem",
        position: 2,
        name: "Archive",
        item: `https://example.com/a/${utcYear}/${utcMonth}/`,
      },
    ],
  },
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "@id": "/#breadcrumlist",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "Home",
        item: "https://example.com/",
      },
      {
        "@type": "ListItem",
        position: 2,
        name: `${section}`,
        item: `https://example.com/sections/${section}/`,
      },
    ],
  },
);

But this generates an error:

Type 'BreadcrumbListLeaf[]' does not satisfy the constraint 'Thing'.
  Property '"@type"' is missing in type 'BreadcrumbListLeaf[]' but required in type 'TouristDestinationLeaf'.ts(2344)