使用use-react-router-breadcrumbs时的唯一key属性问题

方案1：直接给面包屑项组件添加key #

把key属性直接绑定到BreadCrumbsSection组件上，而非在外层包裹额外元素。这样组件既是列表的直接子元素，满足React对key的唯一性要求，同时CSS的:last-child选择器能正常选中最后一项。

示例代码：

// BreadCrumbsRouterComponent 中渲染面包屑的部分
{breadcrumbs.map(item => (
  <BreadCrumbsSection 
    key={item.path}  // 直接给组件加key
    {...item} 
  />
))}

对应的CSS可正常使用:last-child：

.breadcrumbs-section:last-child {
  color: #ff4081;
  font-weight: 600;
}

方案2：通过类名标记当前页面（适用于必须包裹外层元素的场景） #

如果业务需求必须给每个面包屑项包裹外层容器，可在渲染时判断是否为最后一项，手动添加类名替代:last-child的作用。

示例代码：

{breadcrumbs.map((item, index) => (
  <div 
    key={item.path} 
    className={`breadcrumb-item-wrapper ${index === breadcrumbs.length - 1 ? 'current-page' : ''}`}
  >
    <BreadCrumbsSection {...item} />
  </div>
))}

CSS调整为：

.breadcrumb-item-wrapper.current-page .breadcrumbs-section {
  color: #ff4081;
  font-weight: 600;
}

方案3：使用React.Fragment避免额外DOM节点 #

如果需要在不添加额外DOM元素的情况下给列表项加key（比如组件间需插入分隔符等元素），可以用React.Fragment包裹，key绑定在Fragment上，渲染后的DOM结构无多余容器，:last-child依然有效。

示例代码：

{breadcrumbs.map(item => (
  <React.Fragment key={item.path}>
    <BreadCrumbsSection {...item} />
    <span className="breadcrumb-separator">/</span>
  </React.Fragment>
))}

注：若无需插入额外元素，方案1是最简洁的选择。

内容的提问来源于stack exchange，提问作者Elias