This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.
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:
- <Route path="/home" component={Home} exact />
+ <Route path="/home" element={<Home />} />Redirect Changes
The <Redirect> component has been replaced with <Navigate>:
- 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:
- <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:
- const MyComponent: React.FC<RouteComponentProps<{ id: string }>> = ({ match }) => {
- const id = match.params.id;
+ const MyComponent: React.FC = () => {
+ const { id } = useParams<{ id: string }>();Programmatic Navigation
The useHistory hook has been replaced with useNavigate:
- import { useHistory } from 'react-router-dom';
+ import { useNavigate } from 'react-router-dom';
- const history = useHistory();
+ const navigate = useNavigate();
- history.goBack();
+ navigate(-1);
- history.replace('/path');
+ navigate('/path', { replace: true });
- history.push('/path');
+ navigate('/path');For more information on migrating from React Router v5 to v6, refer to the React Router v6 Upgrade Guide.