Skip to content

Commit b2a7105

Browse files
committed
chore(react-router): adding migration details to BREAKING.md
1 parent fedca46 commit b2a7105

File tree

1 file changed

+63
-0
lines changed

1 file changed

+63
-0
lines changed

BREAKING.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,76 @@ This is a comprehensive list of the breaking changes introduced in the major ver
44

55
## Versions
66

7+
- [Version 9.x](#version-9x)
78
- [Version 8.x](#version-8x)
89
- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
910
- [Version 6.x](./BREAKING_ARCHIVE/v6.md)
1011
- [Version 5.x](./BREAKING_ARCHIVE/v5.md)
1112
- [Version 4.x](./BREAKING_ARCHIVE/v4.md)
1213
- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
1314

15+
## Version 9.x
16+
17+
- [Framework Specific](#version-9x-framework-specific)
18+
- [React](#version-9x-react)
19+
20+
<h2 id="version-9x-framework-specific">Framework Specific</h2>
21+
22+
<h4 id="version-9x-react">React</h4>
23+
24+
The `@ionic/react-router` package now requires React Router v6. React Router v5 is no longer supported.
25+
26+
**Minimum Version Requirements**
27+
| Package | Supported Version |
28+
| ---------------- | ----------------- |
29+
| react-router | 6.0.0+ |
30+
| react-router-dom | 6.0.0+ |
31+
32+
React Router v6 introduces several API changes that will require updates to your application's routing configuration:
33+
34+
**Route Definition Changes**
35+
36+
The `component` prop has been replaced with the `element` prop, which accepts JSX:
37+
38+
```diff
39+
- <Route path="/home" component={Home} exact />
40+
+ <Route path="/home" element={<Home />} />
41+
```
42+
43+
**Redirect Changes**
44+
45+
The `<Redirect>` component has been replaced with `<Navigate>`:
46+
47+
```diff
48+
- import { Redirect } from 'react-router-dom';
49+
+ import { Navigate } from 'react-router-dom';
50+
51+
- <Redirect to="/home" />
52+
+ <Navigate to="/home" replace />
53+
```
54+
55+
**Nested Route Paths**
56+
57+
Routes that contain nested routes or child `IonRouterOutlet` components need a `/*` suffix to match sub-paths:
58+
59+
```diff
60+
- <Route path="/tabs" element={<Tabs />} />
61+
+ <Route path="/tabs/*" element={<Tabs />} />
62+
```
63+
64+
**Accessing Route Parameters**
65+
66+
Route parameters are now accessed via the `useParams` hook instead of props:
67+
68+
```diff
69+
- const MyComponent: React.FC<RouteComponentProps<{ id: string }>> = ({ match }) => {
70+
- const id = match.params.id;
71+
+ const MyComponent: React.FC = () => {
72+
+ const { id } = useParams<{ id: string }>();
73+
```
74+
75+
For more information on migrating from React Router v5 to v6, refer to the [React Router v6 Upgrade Guide](https://reactrouter.com/en/main/upgrading/v5).
76+
1477
## Version 8.x
1578

1679
- [Browser and Platform Support](#version-8x-browser-platform-support)

0 commit comments

Comments
 (0)