import MuiLink from '@material-ui/core/Link' ; import clsx from 'clsx' ; import NextLink from 'next/link' ; import { useRouter } from 'next/router' ; import PropTypes from 'prop-types' ; import React from 'react' ; const NextComposed = React . forwardRef ( function NextComposed ( props , ref ) { const { as , href , prefetch , ... other } = props ; return ( < NextLink href = { href } prefetch = { prefetch } as = { as } > < a ref = { ref } { ... other } /> < /NextLink>); } ) ; NextComposed . propTypes = { as : PropTypes . string , href : PropTypes . string , prefetch : PropTypes . bool , } ; function Link ( props ) { const { activeClassName = 'active' , className : classNameProps , innerRef , naked , ... other } = props ; const router = useRouter ( ) ; const className = clsx ( classNameProps , { [ activeClassName ] : router . pathname === props . href && activeClassName , } ) ; if ( naked ) { return < NextComposed className = { className } ref = { innerRef } { ... other } />; } return ( < MuiLink component = { NextComposed } className = { className } ref = { innerRef } { ... other } />); } Link . propTypes = { activeClassName : PropTypes . string , as : PropTypes . string , className : PropTypes . string , href : PropTypes . string , innerRef : PropTypes . oneOfType ( [ PropTypes . func , PropTypes . object ] ) , naked : PropTypes . bool , onClick : PropTypes . func , prefetch : PropTypes . bool , } ; export default React . forwardRef ( ( props , ref ) => ( < Link { ... props } innerRef = { ref } / > ) ) ;