Skip to content

How to make BreadcrumbList with multiple breadcrumb trails  #47

@StewartJ-SSG

Description

@StewartJ-SSG

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions