Skip to content

Commit c60af98

Browse files
sanniassintimdorr
authored andcommitted
Reveal changes in Link to prop in migration guide (remix-run#5358)
1 parent 6941694 commit c60af98

File tree

1 file changed

+33
-0
lines changed

1 file changed

+33
-0
lines changed

packages/react-router/docs/guides/migrating.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ React Router v4 is a complete rewrite, so there is not a simple migration path.
1111
* [Switch](#switch)
1212
* [Redirect](#redirect)
1313
* [PatternUtils](#patternutils)
14+
* [Link](#link)
1415

1516
## The Router
1617

@@ -196,3 +197,35 @@ const thingPath = pathToRegexp.compile(THING_PATH);
196197

197198
<Link to={thingPath({id: 1})}>A thing</Link>
198199
```
200+
201+
## Link
202+
203+
### `to` property is required
204+
In v3, you could omit `to` property or set it to null to create an anchor tag without `href` attribute.
205+
206+
```js
207+
// v3
208+
<Link to={disabled ? null : `/item/${id}`} className="item">
209+
// item content
210+
</Link>
211+
```
212+
213+
In v4, you should always provide `to`. In case you are rely on empty `to` you can make a simple wrapper.
214+
215+
```js
216+
// v4
217+
import { Link } from 'react-router-dom'
218+
219+
const LinkWrapper = (props) => {
220+
const Component = props.to ? Link : 'a'
221+
return (
222+
<Component {...props}>
223+
{ props.children }
224+
</Component>
225+
)
226+
)
227+
228+
<LinkWrapper to={disabled ? null : `/item/${id}`} className="item">
229+
// item content
230+
</LinkWrapper>
231+
```

0 commit comments

Comments
 (0)