[Typescript] Breadcrumbs `as` parameter does not work with Reach Router as documented

Describe the bug Typescript claims a type error when attempting to use Link from @reach/router in the BreadcrumbLink as parameter as documented here

This may also affect other components which use Link

Error:

Type 'typeof Link' is not assignable to type '"symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | ... 157 more ... | undefined'.
  Type 'typeof Link' is not assignable to type 'ComponentClass<any, any> & string'.
    Type 'typeof Link' is not assignable to type 'string'.

Expected Behavior The types should match to allow use as documented and as allowed in JS.

To Reproduce

• Use this template:

yarn create react-app bug-demo --typescript

Install chakra-ui as documented Use this component:

import React from 'react'
import {Breadcrumb, BreadcrumbItem, BreadcrumbLink} from '@chakra-ui/core'
import {Link} from '@reach/router'

export const Bug = () => (
  <Breadcrumb>
    <BreadcrumbItem>
      <BreadcrumbLink as={Link} to="/">Test</BreadcrumbLink>
    </BreadcrumbItem>
  <Breadcrumb>
)

• List the steps to reproduce the behavior: yarn start

Suggested solution(s)

Change the typing on as to be more inclusive. Perhaps ReactNode instead of ElementType

[segunadebayo]

Hi @DavidJFelix,

I’m going to close this considering it’s a duplicate in the #205 issue. We’ve resolved this permanently in the TypeScript branch. It should be released by next month.

Thanks

[DavidJFelix]

unstale. this still exists with a number of link-based components when using reach