githubmirror/next.js

errors/link-passhref.mdx

36 строк878 B

Wes Bos

docs: Add required legacyBehavior for passHref to work (#68897)

23 авг 2024, 17:12

23 авг 2024, 17:12c29810d

---
title: 'Link `passHref`'
---

> Ensure `passHref` is used with custom `Link` components.

## 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` and `legacyBehavior`:

```jsx filename="nav-link.js"
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 legacyBehavior>
      <StyledLink>{name}</StyledLink>
    </Link>
  )
}

export default NavLink
```

## Useful Links

- [next/link - Custom Component](/docs/pages/api-reference/components/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag)