chore(react,react-router): bump typescript dev dependency to v4 (#27348)

Issue number: N/A

---------

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Both react and the react-router packages are on v3 of Typescript. 

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the react and reac-router package to a minimum dev-dependency
of Typescript 4.0.5 (aligning with core)
- Fixes a conflict with the react router types when upgrading to v4 of
Typescript

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

packages/react-router/package-lock.json

@@ -32,7 +32,7 @@
         "rimraf": "^3.0.2",
         "rollup": "^2.26.4",
         "rollup-plugin-sourcemaps": "^0.6.2",
-        "typescript": "^3.9.5"
+        "typescript": "^4.0.5"
       },
       "peerDependencies": {
         "react": ">=16.8.6",
@@ -3389,9 +3389,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "3.9.10",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true,
-      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -5853,7 +5854,9 @@
       }
     },
     "typescript": {
-      "version": "3.9.10",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
     "unbox-primitive": {

packages/react-router/package.json

@@ -66,7 +66,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.26.4",
     "rollup-plugin-sourcemaps": "^0.6.2",
-    "typescript": "^3.9.5"
+    "typescript": "^4.0.5"
   },
   "prettier": "@ionic/prettier-config"
 }

packages/react-router/src/ReactRouter/IonRouteInner.tsx

@@ -9,15 +9,21 @@ export class IonRouteInner extends React.PureComponent<IonRouteProps> {
         path={this.props.path}
         exact={this.props.exact}
         render={this.props.render}
-        /**
-         * `computedMatch` is a private API in react-router v5 that
-         * has been removed in v6.
-         *
-         * This needs to be removed when we support v6.
-         *
-         * TODO: FW-647
-         */
-        computedMatch={(this.props as any).computedMatch}
+        {
+          /**
+           * `computedMatch` is a private API in react-router v5 that
+           * has been removed in v6.
+           *
+           * This needs to be removed when we support v6.
+           *
+           * TODO: FW-647
+           */
+          ...((this.props as any).computedMatch !== undefined
+            ? {
+                computedMatch: (this.props as any).computedMatch,
+              }
+            : {})
+        }
       />
     );
   }

packages/react/package-lock.json

@@ -38,7 +38,7 @@
         "rollup": "^2.26.4",
         "rollup-plugin-sourcemaps": "^0.6.2",
         "ts-jest": "^26.4.4",
-        "typescript": "^3.9.5"
+        "typescript": "^4.0.5"
       },
       "peerDependencies": {
         "react": ">=16.8.6",
@@ -10826,9 +10826,10 @@
       }
     },
     "node_modules/typescript": {
-      "version": "3.9.10",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true,
-      "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -18571,7 +18572,9 @@
       }
     },
     "typescript": {
-      "version": "3.9.10",
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
       "dev": true
     },
     "unbox-primitive": {

packages/react/package.json

@@ -74,7 +74,7 @@
     "rollup": "^2.26.4",
     "rollup-plugin-sourcemaps": "^0.6.2",
     "ts-jest": "^26.4.4",
-    "typescript": "^3.9.5"
+    "typescript": "^4.0.5"
   },
   "jest": {
     "preset": "ts-jest",