Skip to content

Commit 9c3bd89

Browse files
committed
Update upgrading docs
Fixes #8181
1 parent 8e81fed commit 9c3bd89

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

docs/upgrading/v5.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ In general, the process looks like this:
2525

2626
1. [Upgrade to React v16.8 or greater](#upgrade-to-react-v168)
2727
2. [Upgrade to React Router v5.1](#upgrade-to-react-router-v51)
28+
- [Remove `<Redirect>`s inside `<Switch>`](#remove-directs-inside-switch)
29+
- [Refactor custom `<Route>`s](#refactor-custom-routes)
2830
3. [Upgrade to React Router v6](#upgrade-to-react-router-v6)
2931

3032
The following is a detailed breakdown of each step that should help you migrate quickly and with confidence to v6.
@@ -101,6 +103,36 @@ In summary, to upgrade from v4/5 to v5.1, you should:
101103
- Replace any `<Route>`s that are not inside a `<Switch>` with `useRouteMatch`,
102104
or wrap them in a `<Switch>`
103105

106+
### Remove `<Redirect>`s inside `<Switch>`
107+
108+
Remove any `<Redirect>` elements that are directly inside a `<Switch>`.
109+
110+
If you want to redirect on the initial render, you should move the redirect logic to your server (we [wrote more about this here](https://gist.github.com/mjackson/b5748add2795ce7448a366ae8f8ae3bb)).
111+
112+
If you want to redirect client-side, move your `<Redirect>` into a `<Route render>` prop.
113+
114+
```tsx
115+
// Change this:
116+
<Switch>
117+
<Redirect from="about" to="about-us" />
118+
</Switch>
119+
120+
// to this:
121+
<Switch>
122+
<Route path="about" render={() => <Redirect to="about-us" />} />
123+
</Switch>
124+
```
125+
126+
Normal `<Redirect>` elements that are not inside a `<Switch>` are ok to remain. They will become `<Navigate>` elements in v6.
127+
128+
### Refactor custom `<Route>`s
129+
130+
Replace any elements inside a `<Switch>` that are not plain `<Route>` elements with a regular `<Route>`. This includes any `<PrivateRoute>`-style custom components.
131+
132+
You can [read more about the rationale behind this here](https://gist.github.com/mjackson/d54b40a094277b7afdd6b81f51a0393f), including some tips about how to use a `<Route render>` prop in v5 to achieve the same effect.
133+
134+
### Ship it!
135+
104136
Again, **once your app is upgraded to v5.1 you should test and deploy it**, and pick this guide back up when you're ready to continue.
105137

106138
## Upgrade to React Router v6

0 commit comments

Comments
 (0)