diff --git a/BREAKING.md b/BREAKING.md index bf44f563dc..8e97714774 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -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) + +

Framework Specific

+ +

React

+ +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 +- ++ } /> +``` + +**Redirect Changes** + +The `` component has been replaced with ``: + +```diff +- import { Redirect } from 'react-router-dom'; ++ import { Navigate } from 'react-router-dom'; + +- ++ +``` + +**Nested Route Paths** + +Routes that contain nested routes or child `IonRouterOutlet` components need a `/*` suffix to match sub-paths: + +```diff +- } /> ++ } /> +``` + +**Accessing Route Parameters** + +Route parameters are now accessed via the `useParams` hook instead of props: + +```diff +- const MyComponent: React.FC> = ({ 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)