React TypeScript: useRef to Link

Question

How to use useRef with Link

import {Link} from 'react-router-dom';
const myLink = useRef<Link>(null);
...
myLink.current.click()
...

<Link to={{pathname: '/terms'}} id='myLink' ref={myLink} />

the error I get is Property 'click' does not exist on type 'Link<any>'.ts(2339)

I'm currently using the below but i want to move to useRef

    const myLink = document.getElementById('myLink');
    if (myLink) myLink.click();

Answer 1

As the typescript error says, Link component cannot be clicked as simply as anchor. There are two proposed solutions to this.

1. Change Link to <a href="..."> and use HTMLAnchorElement type in the useRef.

2. Or if you want to stay using Link component from react-router-dom, you can access the props of the link component.

if (myLink.current) {
    window.location.assign(myLink.current.props.to.toString()); // redirect to the to prop on Link component
}