Carbon: [Integration with react-router] Property "to" is missing

[matias-quezada]

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-react

Detailed description

Hi! it's us again, we're creating a SideNavLink that should use React Router's Link (or NavLink, same issue) element and apparently it's not allowing us to set it with the error:

Type '<S = unknown>(props: NavLinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<...>)> | null) | (new (props: any) => Component<...>)> | null' is not assignable to type 'string | ((props: Pick<ReactAnchorAttr<HTMLAnchorElement>, "slot" | "style" | "title" | "children" | "download" | "href" | "hrefLang" | "media" | ... 254 more ... | "onTransitionEndCapture">) => ReactElement<...> | null) | (new (props: Pick<...>) => Component<...>) | undefined'.
  Type '<S = unknown>(props: NavLinkProps<S> & RefAttributes<HTMLAnchorElement>) => ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<...>)> | null) | (new (props: any) => Component<...>)> | null' is not assignable to type '(props: Pick<ReactAnchorAttr<HTMLAnchorElement>, "slot" | "style" | "title" | "children" | "download" | "href" | "hrefLang" | "media" | "ping" | ... 253 more ... | "onTransitionEndCapture">) => ReactElement<...> | null'.
    Types of parameters 'props' and 'props' are incompatible.
      Type 'Pick<ReactAnchorAttr<HTMLAnchorElement>, "slot" | "style" | "title" | "children" | "download" | "href" | "hrefLang" | "media" | "ping" | ... 253 more ... | "onTransitionEndCapture">' is not assignable to type 'NavLinkProps<unknown> & RefAttributes<HTMLAnchorElement>'.
        Property 'to' is missing in type 'Pick<ReactAnchorAttr<HTMLAnchorElement>, "slot" | "style" | "title" | "children" | "download" | "href" | "hrefLang" | "media" | "ping" | ... 253 more ... | "onTransitionEndCapture">' but required in type 'NavLinkProps<unknown>'.

The relevant part is Property 'to' is missing in type 'Pick<ReactAnchorAttr<HTMLAnchorElement>, ...>.

I assume there's an error since in the Carbon Design React tutorial this is being used with HeaderName and HeaderMenuItem.

Code to reproduce:

import React from 'react';
import { SideNavLink } from 'carbon-components-react';
import { NavLink } from 'react-router-dom';

export function Sidebar() {
  return (
    <SideNavLink element={NavLink} to="/report">
      Report
    </SideNavLink>
  );
}

Versions

• carbon-components: 10.22.0
• carbon-components-react: 7.22.0
• react-router-dom: 5.2.0
• typescript: 3.7.5

Screenshot

[tw15egan]

The typings for carbon-components-react are community maintained, so I believe the fix will need to be made over at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/carbon-components-react

Rel https://github.com/carbon-design-system/carbon/issues/7271

[matias-quezada]

Hi! I've checked the DefinitelyTyped repository and found this issue https://github.com/DefinitelyTyped/DefinitelyTyped/issues/44772

Apparently React components can be used as generics in TSX which makes it quite confusing 😅

Issue https://github.com/carbon-design-system/carbon/issues/5671 is related to this, just linking in case it's useful for anybody else.

I'll close this issue then, thanks for your time.

---

To anyone who finds this.

This is how we worked around this issue:

return (
  <SideNavLink
    element={() => <NavLink to={`/report/${x.id}`} />}
    key={x.id}
  />
);