@@ -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