rsnext/errors/link-passhref.md
Houssein Djirdeh 569da9d286
ESLint Plugin: passHref is not assigned (#24670)
Adds a lint rule warning to the Next.js ESLint plugin if `passHref=true` is not assigned for `<Link>` wrapping a custom component.

Fixes #23713
2021-05-10 18:35:11 +00:00

751 B

Link passHref

Why This Error Occurred

passHref was not used for a Link component that wraps a custom component. This is needed in order to pass the href to the child <a> tag.

Possible Ways to Fix It

If you're using a custom component that wraps an <a> tag, make sure to add passHref:

import Link from 'next/link'
import styled from 'styled-components'

const StyledLink = styled.a`
  color: red;
`

function NavLink({ href, name }) {
  return (
    <Link href={href} passHref>
      <StyledLink>{name}</StyledLink>
    </Link>
  )
}

export default NavLink