Closed vicary closed 3 years ago
Copying the author of @types/react-router-hash-link
here, @zoompie. Issues are disabled in that fork.
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>
React Router 6 doesn't export LinkProps, any workaround?
@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.
@Sphinxs Usually React.ComponentProps<Link>
works, you may try your luck. 🤞🏻
v2 of react-router-hash-link
implements React.forwardRef(...)
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.