I'm having problems understanding how to apply key attribute for my breadcrumbs router component. I am getting this error in the console.

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `BreadCrumbsRouterComponent`. See https://reactjs.org/link/warning-keys for more information.
    at BreadCrumbsRouterComponent (http://localhost:3000/static/js/bundle.js:710:95)
    at span
    at div
    at BreadCrumbsSection
    at CategoriesView
    at RenderedRoute (http://localhost:3000/static/js/bundle.js:42813:5)
    at Routes (http://localhost:3000/static/js/bundle.js:43235:5)
    at Router (http://localhost:3000/static/js/bundle.js:43173:15)
    at BrowserRouter (http://localhost:3000/static/js/bundle.js:41505:5)
    at App (http://localhost:3000/static/js/bundle.js:463:83)

This is my breadcrumbs component. I used documentation from these pages:
https://www.npmjs.com/package/use-react-router-breadcrumbs
https://stackblitz.com/edit/github-fiw8uj?file=src/App.tsx

import React from 'react'
import { NavLink } from 'react-router-dom';
import useBreadcrumbs from "use-react-router-breadcrumbs";

const BreadCrumbsRouterComponent = () => {
  const breadcrumbs = useBreadcrumbs();
  return (
    <>
      {breadcrumbs.map(({ breadcrumb, match }, index) => (
        <>
          <NavLink key={match.pathname} to={match.pathname}>
            {breadcrumb}
          </NavLink>
          {index !== breadcrumbs.length - 1 && '\u00a0\u00a0>\u00a0\u00a0'}
        </>
      ))}
    </>
  )
}
export default BreadCrumbsRouterComponent

This is my breadcrumbs section of which i use in my views.

import React from 'react'
import BreadCrumbsRouterComponent from '../components/BreadCrumbsRouterComponent'

const BreadCrumbsSection = () => {
  return (
    <div className="breadcrumb-container">
      <span className="container">
        <BreadCrumbsRouterComponent />
      </span>
    </div>
  )
}
export default BreadCrumbsSection

This is my CSS

.breadcrumb-container {
    .container{
        display: flex;
        margin-top: 1rem;
        @include font-16-medium;
        @include xxl-min{
            max-width: 1110px;
        }
        .active{
            color: $color-grey;
            &:last-child{
                color: $color-theme;
            }
        }
    }
}

I've tried moving the "key" higher in the hierarchy by adding a new element. It solves the error but then i lose the control in CSS of which i want to use :last-child selector to highlight the current page.

CodePudding user response：

I'm not sure, but you might need to put key into fragment component.

{breadcrumbs.map(({ breadcrumb, match }, index) => (
        <React.Fragment key={match.pathname}> // here
          <NavLink  to={match.pathname}>
            {breadcrumb}
          </NavLink>
          {index !== breadcrumbs.length - 1 && '\u00a0\u00a0>\u00a0\u00a0'}
        <React.Fragment />
      ))}