import React , { isValidElement , cloneElement , useCallback } from 'react' ; import { useNavigate } from './useNavigate' ; interface Props { children ? : any ; url : string ; query ? : Record < string , string > ; replace ? : boolean ; target ? : string ; onClick ? : Function ; navigateOptions ? : Record < string , any > ; } function Link ( props ) { const { children , onClick , url , query , replace , target , navigateOptions , ... otherProps } = props ; const navigate = useNavigate ( { url , query , replace , ... navigateOptions } ) ; const handleClick = useCallback ( ( event ) => { if ( target || event . ctrlKey || event . metaKey || event . altKey || event . shiftKey || event . button !== 0 ) { return ; } event . preventDefault ( ) ; navigate ( ) ; onClick && onClick ( event ) ; } , [ navigate , target , onClick ] ) ; const extraProps = { href : url , onClick : handleClick , target } ; if ( isValidElement ( children ) ) { return cloneElement ( children , extraProps ) ; } return ( < a { ... otherProps } { ... extraProps } > { children } < /a>); } Link . displayName = 'Link' ; export { Link } ;