Incompatible with `@material-ui`

[vicary]

Summary

Got the following error (see image below) about function component not able to contain ref, probably related to their caveat-with-refs.

Added to the problem is that there are mismatches between @types/react-router-hash-link where is declares itself as a class component, and the actual source code is in fact a function component, an usual fix <Link component={React.forwardRef(HashLink)}>...</Link> yield an eslint error (see image below).

Workaround

A temporary workaround is to force tslint to ignore that specific line of code, but definitely suboptimal to see.

{/*
// @ts-ignore */}
<Link component={forwardRef(HashLink)} to="/">...</Link>

[vicary]

Copying the author of @types/react-router-hash-link here, @zoompie. Issues are disabled in that fork.

[andreaskundig]

I don't know if this helps with material ui Links, but this works with Buttons and ListItems

import React from 'react';
import { LinkProps } from "react-router-dom";
import { HashLink } from 'react-router-hash-link';
export const WrappedRouterLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props) => (
    <HashLink   {...props} />
));

Then I use a material-ui Button this way:

<Button color="inherit" component={WrappedRouterLink} to="/doc">
  About
</Button>

[ghost]

React Router 6 doesn't export LinkProps, any workaround?

[vicary]

@andreaskundig Yes, that's another way to fake the type system. But still, material-ui needs to fix their typings to cope with forwardRef() if they are still relying on it. Keeping a close eye on this comment.

[vicary]

@Sphinxs Usually React.ComponentProps<Link> works, you may try your luck. 🤞🏻

[rafgraph]

v2 of react-router-hash-link implements React.forwardRef(...)