// React Router v6:
// hook returns a click event handler to for navigation when
// building custom <Link>
import { useHref, useLinkClickHandler } from 'react-router-dom'
const StyledLink = styled('a', { color: 'fuchsia' })
const Link = React.forwardRef(
(
{ onClick, replace: false, state, target, to, ...rest }, ref
) => {
let href = useHref(to)
let handleClick = useLinkClickHandler(to, {
replace,
state,
target
})
return (
<StyledLink
{...rest}
href={href}
onClick={e => {
onClick?.(e)
!e.defaultPrevented && handleClick(e)
}}
ref={ref}
target={target}
/>
)
}
)