ionic-team · ShaneK · Aug 14, 2026 · Aug 14, 2026
@@ -29,7 +29,7 @@ runs:
       shell: bash
       working-directory: ./packages/react-router/test
     - name: 🕸️ Install Dependencies
-      run: npm install --legacy-peer-deps
+      run: npm install
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
     - name: 📦 Install Playwright Browsers

@@ -198,7 +198,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [react17, react18, react19]
+        apps: [react18, react19]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:

@@ -219,7 +219,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        apps: [react17, react18, react19]
+        apps: [react18, react19]
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:

@@ -45,7 +45,7 @@ This section details the desktop browser, JavaScript framework, and mobile platf
 | Framework | Supported Version     |
 | --------- | --------------------- |
 | Angular   | 18+                   |
-| React     | 18+                   |
+| React     | 18 or 19              |
 | Vue       | 3.5+                  |
 
 **Minimum Mobile Platform Versions**
@@ -321,13 +321,17 @@ Angular's current build pipeline no longer supports the webpack-loader `~` prefi
 
 <h4 id="version-9x-react">React</h4>
 
+The `@ionic/react` and `@ionic/react-router` packages now require React 18 or 19. React 17 is no longer supported.
+
 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            | 18 or 19          |
+| react-dom        | 18 or 19          |
+| react-router     | 6.4.0+            |
+| react-router-dom | 6.4.0+            |
 
 React Router v6 introduces several API changes that will require updates to your application's routing configuration:
 

@@ -274,9 +274,7 @@ build_react_router_test() {
   cd "${REPO_ROOT}/packages/react-router/test"
   ./build.sh "${APP}"
   cd "build/${APP}"
-  # The react-router test apps require --legacy-peer-deps (mixed react versions
-  # across @ionic/react peer ranges).
-  npm install --legacy-peer-deps
+  npm install
   npm run sync
   # IonReactRouter basename is derived from import.meta.env.BASE_URL which Vite
   # sets from --base, so routing works under the /react-router/ sub-path.

@@ -1,6 +1,6 @@
 # React Router Testing
 
-Ionic Framework supports multiple versions of React Router. As a result, we need to verify that Ionic works correctly with each of these React Router versions.
+Ionic Framework supports React Router v6 across multiple versions of React. As a result, we need to verify that Ionic routing works correctly with each of these React versions.
 
 ## Type Checking
 
@@ -70,26 +70,26 @@ Unlike other test applications, these test apps are broken up into multiple dire
 Usage:
 
 ```shell
-# Build a test app using apps/reactrouter5 as a reference
-./build.sh reactrouter5
+# Build a test app using apps/reactrouter6-react18 as a reference
+./build.sh reactrouter6-react18
 ```
 
 ## How to modify test apps
 
 To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version.
 
-If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/reactrouter5`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`.
+If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/reactrouter6-react18`, make sure you place the file in `apps/reactrouter6-react18/tests/e2e/test.e2e.ts`.
 
 ### Version-specific tests
 
 If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
 
 ## Adding New Test Apps
 
-As we add support for new versions of React Router, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
+As we add support for new versions of React, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
 
-1. Navigate to the built app for the most recent version of React Router that Ionic tests.
-2. Update the application to the latest version of React Router.
+1. Navigate to the built app for the most recent version of React that Ionic tests.
+2. Update the application to the latest version of React.
 3. Make note of any files that changed during the upgrade (`package.json`, `package-lock.json`, etc).
 4. Copy the changed files to a new directory in `apps`.
 5. Add a new entry to the matrix for `test-react-router-e2e` in `./github/workflows/build.yml`. This will allow the new test app to run against all PRs.

@@ -33,15 +33,15 @@ Unlike other test applications, these test apps are broken up into multiple dire
 Usage:
 
 ```shell
-# Build a test app using apps/react17 as a reference
-./build.sh react17
+# Build a test app using apps/react18 as a reference
+./build.sh react18
 ```
 
 ## How to modify test apps
 
 To add new tests, components, or pages, modify the `base` project. This ensures that tests are run for every tested version.
 
-If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/react17`, make sure you place the file in `apps/react17/tests/e2e/test.e2e.ts`.
+If you want to add a version-specific change, add the change inside of the appropriate projects in `apps`. Be sure to replicate the directory structure. For example, if you are adding a new E2E test file called `test.e2e.ts` in `apps/react18`, make sure you place the file in `apps/react18/tests/e2e/test.e2e.ts`.
 
 ### Version-specific tests
 

@@ -41,8 +41,8 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "react": ">=16.8.6",
-    "react-dom": ">=16.8.6",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
     "react-router": ">=6.4.0 <7",
     "react-router-dom": ">=6.4.0 <7"
   },
@@ -53,16 +53,16 @@
     "@ionic/prettier-config": "^2.0.0",
     "@rollup/plugin-typescript": "^11.1.5",
     "@types/node": "^24.13.3",
-    "@types/react": "^17.0.79",
-    "@types/react-dom": "^17.0.25",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "history": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-import": "^2.31.0",
     "prettier": "^2.8.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router": "^6.30.0",
     "react-router-dom": "^6.30.0",
     "rimraf": "^3.0.2",

@@ -86,7 +86,7 @@ if [ "$SKIP_BUILD" = "0" ]; then
   sh ./build.sh "$APP_NAME"
   cd "build/$APP_NAME"
   echo "Installing dependencies..."
-  npm install --legacy-peer-deps > npm_install.log 2>&1
+  npm install > npm_install.log 2>&1
   npm run sync
 else
   echo "Skipping build (--skip-build)."

@@ -39,6 +39,7 @@ const ION_PAGE_WAIT_TIMEOUT_MS = 300;
 const debug = createDebugLogger('react-router');
 
 interface StackManagerProps {
+  children: React.ReactNode;
   routeInfo: RouteInfo;
   id?: string;
 }

@@ -15,7 +15,4 @@ npm pack ../../../../react
 npm pack ../../../
 
 # Install Dependencies
-# TODO: Remove --legacy-peer-deps once @ionic/react peer deps align with test app versions.
-# Currently needed because packed tarballs may have peer dep ranges that conflict with
-# the specific React/React-Router versions in test apps.
-npm install *.tgz --no-save --legacy-peer-deps
+npm install *.tgz --no-save
@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Directory containing test application versions
-# (e.g. reactrouter5, reactrouter6, etc.)
+# (e.g. reactrouter6-react18, reactrouter6-react19, etc.)
 APPS_DIR="apps"
 
 # Base application template that all test apps are built from

@@ -47,8 +47,8 @@
     "tslib": "*"
   },
   "peerDependencies": {
-    "react": ">=16.8.6",
-    "react-dom": ">=16.8.6"
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",

@@ -17,10 +17,9 @@ const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-c
  * directly and sync props through attachProps, so we strip the stray attribute
  * here after the property has been assigned.
  *
- * TODO(FW-7629): This only matters on React 17 and 18. React 19 added full custom-element
- * support and no longer serializes a `false` boolean prop to a `="false"`
- * attribute, so there is nothing to strip there (this stays a harmless no-op).
- * Once React 17/18 support is dropped, this stripping can be removed.
+ * TODO(FW-7629): React 19 added full custom-element support and no longer
+ * serializes a `false` boolean prop to a `="false"` attribute, so this stripping
+ * can be removed once React 18 support is dropped.
  */
 const isStaleFalseBooleanAttribute = (attribute: string) =>
   !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);