javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(react-router): adding migration details to BREAKING.md

Browse Source
This commit is contained in:
ShaneK
2025-12-04 11:58:12 -08:00
parent fedca460a0
commit b2a7105034
1 changed files with 63 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
BREAKING.md
View File

@@ -4,6 +4,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
## Versions
- [Version 9.x](#version-9x)
- [Version 8.x](#version-8x)
- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
- [Version 6.x](./BREAKING_ARCHIVE/v6.md)
@@ -11,6 +12,68 @@ This is a comprehensive list of the breaking changes introduced in the major ver
- [Version 4.x](./BREAKING_ARCHIVE/v4.md)
- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
## Version 9.x
- [Framework Specific](#version-9x-framework-specific)
- [React](#version-9x-react)
<h2 id="version-9x-framework-specific">Framework Specific</h2>
<h4 id="version-9x-react">React</h4>
The `@ionic/react-router` package now requires React Router v6. React Router v5 is no longer supported.
**Minimum Version Requirements**
| Package | Supported Version |
| ---------------- | ----------------- |
| react-router | 6.0.0+ |
| react-router-dom | 6.0.0+ |
React Router v6 introduces several API changes that will require updates to your application's routing configuration:
**Route Definition Changes**
The `component` prop has been replaced with the `element` prop, which accepts JSX:
```diff
- <Route path="/home" component={Home} exact />
+ <Route path="/home" element={<Home />} />
```
**Redirect Changes**
The `<Redirect>` component has been replaced with `<Navigate>`:
```diff
- import { Redirect } from 'react-router-dom';
+ import { Navigate } from 'react-router-dom';
- <Redirect to="/home" />
+ <Navigate to="/home" replace />
```
**Nested Route Paths**
Routes that contain nested routes or child `IonRouterOutlet` components need a `/*` suffix to match sub-paths:
```diff
- <Route path="/tabs" element={<Tabs />} />
+ <Route path="/tabs/*" element={<Tabs />} />
```
**Accessing Route Parameters**
Route parameters are now accessed via the `useParams` hook instead of props:
```diff
- const MyComponent: React.FC<RouteComponentProps<{ id: string }>> = ({ match }) => {
- const id = match.params.id;
+ const MyComponent: React.FC = () => {
+ const { id } = useParams<{ id: string }>();
```
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).
## Version 8.x
- [Browser and Platform Support](#version-8x-browser-platform-support)