React Breadcrumb Component Implementation

Building a breadcrumb component is a common task in web development, particularly for complex applications with hierarchical navigation. Breadcrumbs provide users with a clear trail of their current location within a site, improving usability and allowing for easy backtracking. This challenge asks you to implement a reusable breadcrumb component in React using TypeScript.

Problem Description

You are tasked with creating a Breadcrumb component in React that displays a series of links representing the user's navigation path. The component should accept an array of objects as a prop, where each object represents a breadcrumb item. Each object should have a label (string) and an link (string) property. The last item in the array should not have a link and should be displayed as plain text. The component should render a visually appealing and functional breadcrumb trail.

Key Requirements:

• Dynamic Breadcrumb Items: The component must dynamically render breadcrumb items based on the provided array of objects.
• Link vs. Text: The last item in the array should be displayed as plain text without a link. All preceding items should be rendered as links.
• Styling: While specific styling is not required, the component should be structured in a way that allows for easy styling (e.g., using CSS classes). Assume you'll be applying external styling.
• Accessibility: Ensure the component is accessible by using appropriate HTML elements and attributes (e.g., aria-label, aria-current).

Expected Behavior:

The component should render a horizontal list of breadcrumb items. Each item (except the last) should be a link to the specified URL. The last item should be plain text indicating the current page. The breadcrumbs should be separated by a visual separator (e.g., / or > - styling to achieve this is left to external CSS).

Edge Cases to Consider:

• Empty Array: If the input array is empty, the component should render nothing.
• Single Item Array: If the input array contains only one item, it should be rendered as plain text.
• Invalid Input: While not strictly required, consider how the component might handle invalid input (e.g., an object missing a label or link). Graceful degradation is preferred over errors.

Examples

Example 1:

Input: [{ label: 'Home', link: '/' }, { label: 'Products', link: '/products' }, { label: 'Electronics', link: '/products/electronics' }]
Output: <a href="/">Home</a> / <a href="/products">Products</a> / <a href="/products/electronics">Electronics</a>
Explanation: Three breadcrumb items are rendered as links, separated by `/`.

Example 2:

Input: [{ label: 'Home', link: '/' }, { label: 'Contact' }]
Output: <a href="/">Home</a> / Contact
Explanation: Two breadcrumb items are rendered. The first is a link, and the second is plain text.

Example 3:

Input: [{ label: 'Home' }]
Output: Home
Explanation: A single breadcrumb item is rendered as plain text.

Example 4:

Input: []
Output: (Nothing rendered)
Explanation: An empty array results in no breadcrumbs being displayed.

Constraints

• The component must be written in React using TypeScript.
• The component should be reusable and accept the breadcrumb data as a prop.
• The component should not include any specific styling (CSS). Assume external styling will be applied.
• The component should be reasonably performant for a typical number of breadcrumb items (up to 10).

Notes

• Consider using React fragments (<>...</>) to avoid unnecessary DOM nodes.
• Think about how to structure the component to make it easy to add accessibility features.
• You can use any standard React libraries or techniques you are comfortable with.
• Focus on the core functionality of rendering the breadcrumb items correctly based on the input data.