search

remix-run / remix

Build Better Websites. Create modern, resilient user experiences with web fundamentals.
https://remix.run
MIT License
28.74k stars 2.44k forks source link

[Bug]: Can't pass component to Link #1609

Closed Industrial closed 2 years ago

Industrial commented 2 years ago

Which Remix packages are impacted?

What version of Remix are you using?

1.1.3

What version of Node are you using? Minimum supported version is 14.

17.4.0

Steps to Reproduce

https://github.com/remix-run/remix/blob/main/packages/remix-react/components.tsx#L456

This does not implement the component property specified in https://v5.reactrouter.com/web/api/Link/component-reactcomponent

Like this, I can't use it with for example, the <Link> component of MaterialUI.

Expected Behavior

<Link to="https://google.com" component={MyLinkComponent}>Google</Link>

Actual Behavior

Not supported.

Industrial commented 2 years ago

Currently this gives a type error:

Type '{ children: string | undefined; to: string; prefetch: "render"; component: OverridableComponent<LinkTypeMap<{}, "a">>; }' is not assignable to type 'IntrinsicAttributes & RemixLinkProps & RefAttributes<HTMLAnchorElement>'

Industrial commented 2 years ago

The MaterialUI Link component does support it, so I've implemented it like this for now (I'd rather implement it the other way around, using the MaterialUI link as an argument to the Remix one)

import { Link as MUILink, LinkProps as MUILinkProps } from '@mui/material'
import { Link as RemixLink, LinkProps as RemixLinkProps } from 'remix'

export type LinkProps = MUILinkProps & RemixLinkProps

export function Link({ children, ...props }: LinkProps) {
  return (
    <MUILink component={RemixLink} prefetch="render" {...props}>
      {children}
    </MUILink>
  )
}
balavishnuvj commented 2 years ago

remix uses version 6, component prop is not supported anymore. You could implement something like this. https://reactrouter.com/docs/en/v6/upgrading/v5#remove-link-component-prop

Industrial commented 2 years ago

Ah, great. That solves the problem in a good way. I can use this with <Link>'s and <Button>'s (which can also render to <a>) with MaterialUI. Thanks!