import * as React from 'react' ; import clsx from 'clsx' ; import { useRouter } from 'next/router' ; import NextLink , { LinkProps as NextLinkProps } from 'next/link' ; import MuiLink , { LinkProps as MuiLinkProps } from '@material-ui/core/Link' ; type NextComposedProps = Omit < React . AnchorHTMLAttributes < HTMLAnchorElement > , 'href' > & NextLinkProps ; const NextComposed = React . forwardRef < HTMLAnchorElement , NextComposedProps > ( ( props , ref ) => { const { as , href , replace , scroll , passHref , shallow , prefetch , ... other } = props ; return ( < NextLink href = { href } prefetch = { prefetch } as = { as } replace = { replace } scroll = { scroll } shallow = { shallow } passHref = { passHref } > < a ref = { ref } { ... other } /> < /NextLink>); } ) ; interface LinkPropsBase { activeClassName ? : string ; innerRef ? : React . Ref < HTMLAnchorElement > ; naked ? : boolean ; } export type LinkProps = LinkPropsBase & NextComposedProps & Omit < MuiLinkProps , 'href' > ; function Link ( props ) { const { href , activeClassName = 'active' , className : classNameProps , innerRef , naked , ... other } = props ; const router = useRouter ( ) ; const pathname = typeof href === 'string' ? href : href . pathname ; const className = clsx ( classNameProps , { [ activeClassName ] : router . pathname === pathname && activeClassName , } ) ; if ( naked ) { return < NextComposed className = { className } ref = { innerRef } href = { href } { ... other } />; } return ( < MuiLink component = { NextComposed } className = { className } ref = { innerRef } href = { href as string } { ... other } />); } export default React . forwardRef < HTMLAnchorElement , LinkProps > ( ( props , ref ) => ( < Link { ... props } innerRef = { ref } / > ) ) ;