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();
As the typescript error says, Link component cannot be clicked as simply as anchor. There are two proposed solutions to this.
Change Link to <a href="..."> and use HTMLAnchorElement type in the useRef.
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
}
Expected an assignment or function call and instead saw an expression no-unused-expressions from if (myLink.current) myLink.current.props.to;
to is only assigned a value to be redirected to. I will edit the answer for completeness.http://localhost:3000/[object%20Object] when using the .click() above the page doesn't completely refresh giving that flash of un styled content but does load the correct pageto prop in link, instead of to={{ pathname: '/terms' }} only to="/terms"I went with Kryštof Řeháček #1 solution. Here's the code
import React, { useRef } from 'react';
const App: React.FC = () => {
const linkRef = useRef<HTMLAnchorElement>(null);
const handleClick = () => {
if (linkRef.current) linkRef.current.click();
};
return (
<div>
<a ref={linkRef} href={'/some-url'} style={{ display: 'none' }}></a>
<button onClick={handleClick}>Go to some url</button>
</div>
);
};
export default App;
Issue: Link is not a native DOM element, its a React element that's why method .click is not directly compatible with Link
solution: you can use
const navigate = useNavigate()
const myLink = useRef<HTMLAnchorElement>(null)
const handleClick = () => {
navigate('/terms')
}
{/* you can use button */}
<button onClick={handleClick}>Terms</button>
{/* or you can use link */}
<Link to="/terms" id="myLink" ref={myLink}>
Terms
</Link>
however If you just wanted to create an anchor link, there's a simple solution in HTML5 that works seamlessly with React components.
<HashLink smooth to="#subscribe"> subscribe </HashLink>
<div id="subscribe">
<input type="email"/>
</div>
even if the "div" is in another component you do not need to give any refrence to this div, only id will do the work.
useRef with Link not how to use an anchor link.