You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
## If the child is a custom component that wraps an `<a>` tag
78
78
79
-
If the child component in `Link` is a function component, you'll need to wrap it in [`React.forwardRef`](https://reactjs.org/docs/react-api.html#reactforwardref) like in the following example:
79
+
If the child of `Link` is a custom component that wraps an `<a>` tag, you must add `passHref` to `Link`. This is necessary if you’re using libraries like [styled-components](https://styled-components.com/). Without this, the `<a>` tag will not have the `href` attribute, which might hurt your site’s SEO.
80
+
81
+
```jsx
82
+
importLinkfrom'next/link'
83
+
importstyledfrom'styled-components'
84
+
85
+
constRedLink=styled.a`
86
+
color: red;
87
+
`
88
+
89
+
functionNavLink({ href, name }) {
90
+
return (
91
+
<Link href={href} passHref>
92
+
<RedLink>{name}</RedLink>
93
+
</Link>
94
+
)
95
+
}
96
+
97
+
exportdefaultNavLink
98
+
```
99
+
100
+
> **Note:** If you’re using [emotion](https://emotion.sh/)’s JSX pragma feature (`@jsx jsx`), you must use `passHref` even if you use an `<a>` tag directly.
101
+
102
+
## If the child is a function component
103
+
104
+
If the child of `Link` is a function component, in addition to using `passHref`, you must wrap the component in [`React.forwardRef`](https://reactjs.org/docs/react-api.html#reactforwardref):
80
105
81
106
```jsx
82
-
importReactfrom'react'
83
107
importLinkfrom'next/link'
84
108
85
109
// `onClick`, `href`, and `ref` need to be passed to the DOM element
@@ -147,29 +171,6 @@ The default behavior of the `Link` component is to `push` a new URL into the `hi
147
171
148
172
The child of `Link` is `<img>` instead of `<a>`. `Link` will send the `onClick` property to `<img>` but won't pass the `href` property.
149
173
150
-
## Forcing `Link` to expose `href` to its child
151
-
152
-
If the child is an `<a>` tag and doesn't have a `href` attribute we specify it so that the repetition is not needed by the user. However, sometimes, you’ll want to pass an `<a>` tag inside of a wrapper and `Link` won’t recognize it as a _hyperlink_, and, consequently, won’t transfer its `href` to the child.
153
-
154
-
In cases like that, you can add the `passHref` property to `Link`, forcing it to expose its `href` property to the child. Take a look at the following example:
155
-
156
-
```jsx
157
-
importLinkfrom'next/link'
158
-
importUnexpected_Afrom'third-library'
159
-
160
-
functionNavLink({ href, name }) {
161
-
return (
162
-
<Link href={href} passHref>
163
-
<Unexpected_A>{name}</Unexpected_A>
164
-
</Link>
165
-
)
166
-
}
167
-
168
-
exportdefaultNavLink
169
-
```
170
-
171
-
> **Please note**: using a tag other than `<a>` and failing to pass `passHref` may result in links that appear to navigate correctly, but, when being crawled by search engines, will not be recognized as links (owing to the lack of `href` attribute). This may result in negative effects on your sites SEO.
172
-
173
174
## Disable scrolling to the top of the page
174
175
175
176
The default behavior of `Link` is to scroll to the top of the page. When there is a hash defined it will scroll to the specific id, just like a normal `<a>` tag. To prevent scrolling to the top / hash `scroll={false}` can be added to `Link`:
0 commit comments