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
Description
When using
Breadcrumbs.Itemwith Next.js andnext/link, the following warning occurs:Creating an adapted version of
Breadcrumbs.Itemresolves the issue: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
Version
35.18.0
Browser
Firefox