JAVASCRIPT

useLinkClickHandler

// 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}
      />
    )
  }
)