Closed
Description
Description
When using Breadcrumbs.Item with Next.js and next/link, the following warning occurs:
Warning: React does not recognize the `activeClassName` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `activeclassname` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
Creating an adapted version of Breadcrumbs.Item resolves the issue:
const BreadcrumbsItem = styled.a.attrs(props => ({
className: classnames(props.selected && SELECTED_CLASS, props.className),
'aria-current': props.selected ? 'page' : null,
...(typeof props.to === 'string' ? { activeClassName: 'selected' } : {}),
}))
...
I'm not sure if this is the desired fix, however it would be good if the issue is resolved, or that my usage is corrected if invalid.
Steps to reproduce
- Create a test page using Primer React 35.18.0 + Next.js 13.1.5:
import { Breadcrumbs } from '@primer/react';
import Link from 'next/link';
export default function TestPage() {
return (
<Breadcrumbs>
<Breadcrumbs.Item
as={Link}
href={'/target'}
>
Target
</Breadcrumbs.Item>
</Breadcrumbs>
);
}
Version
35.18.0
Browser
Firefox