chore(react-router): fixing types, removing usued variable

Author: ShaneK

docs/react-router/react-router-6-status.md

@@ -103,7 +103,7 @@ This aligns with React Router 6's nested routing semantics where child routes ar
 
 ### Before Alpha Release
 
-1. **Run a TypeScript strict check** on the `@ionic/react-router` package to catch any type regressions
+1. ~~**Run a TypeScript strict check** on the `@ionic/react-router` package~~ Complete - all type errors resolved
 2. **Manual testing pass** through the test app to verify animations and gestures feel correct
 
 ### Documentation

packages/react-router/package-lock.json

@@ -52,8 +52,7 @@
     "@types/node": "^14.0.14",
     "@types/react": "^17.0.79",
     "@types/react-dom": "^17.0.25",
-    "@types/react-router": "^5.0.3",
-    "@types/react-router-dom": "^5.1.5",
+    "history": "^5.3.0",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^7.32.0",

packages/react-router/package.json

@@ -8,7 +8,10 @@
 
 import type { AnimationBuilder, RouteAction, RouteInfo, RouteManagerContextState, RouterDirection } from '@ionic/react';
 import { LocationHistory, NavManager, RouteManagerContext, generateId, getConfig } from '@ionic/react';
-import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
+import type { Action as HistoryAction, Location } from 'history';
+
+// Use Location directly - state is typed as `unknown` in history v5
+type HistoryLocation = Location;
 import type { PropsWithChildren } from 'react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -23,10 +26,22 @@ export interface LocationState {
 }
 
 interface IonRouterProps {
-  registerHistoryListener: (cb: (location: HistoryLocation<any>, action: HistoryAction) => void) => void;
+  registerHistoryListener: (cb: (location: HistoryLocation, action: HistoryAction) => void) => void;
 }
 
 type RouteParams = Record<string, string | string[] | undefined>;
+type SafeRouteParams = Record<string, string | string[]>;
+
+const filterUndefinedParams = (params: RouteParams): SafeRouteParams => {
+  const result: SafeRouteParams = {};
+  for (const key of Object.keys(params)) {
+    const value = params[key];
+    if (value !== undefined) {
+      result[key] = value;
+    }
+  }
+  return result;
+};
 
 const areParamsEqual = (a?: RouteParams, b?: RouteParams) => {
   const paramsA = a || {};
@@ -61,7 +76,7 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
   const viewStack = useRef(new ReactRouterViewStack());
   const incomingRouteParams = useRef<Partial<RouteInfo> | null>(null);
 
-  const [routeInfo, setRouteInfo] = useState({
+  const [routeInfo, setRouteInfo] = useState<RouteInfo>({
     id: generateId('routeInfo'),
     pathname: location.pathname,
     search: location.search,
@@ -87,7 +102,7 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
     const matchedParams = activeView?.routeData.match?.params as RouteParams | undefined;
 
     if (matchedParams) {
-      const paramsCopy = { ...matchedParams };
+      const paramsCopy = filterUndefinedParams({ ...matchedParams });
       if (areParamsEqual(routeInfo.params as RouteParams | undefined, paramsCopy)) {
         return;
       }
@@ -110,7 +125,7 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
    * @param location The current location object from the history.
    * @param action The action that triggered the history change.
    */
-  const handleHistoryChange = (location: HistoryLocation<LocationState>, action: HistoryAction) => {
+  const handleHistoryChange = (location: HistoryLocation, action: HistoryAction) => {
     let leavingLocationInfo: RouteInfo;
     /**
      * A programmatic navigation was triggered.
@@ -188,10 +203,11 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
         }
         // Still found no params, set it to a default state of forward.
         if (!incomingRouteParams.current) {
+          const state = location.state as LocationState | null;
           incomingRouteParams.current = {
             routeAction: 'push',
-            routeDirection: location.state?.direction || 'forward',
-            routeOptions: location.state?.routerOptions,
+            routeDirection: state?.direction || 'forward',
+            routeOptions: state?.routerOptions,
             tab: tabToUse,
           };
         }
@@ -228,7 +244,9 @@ export const IonRouter = ({ children, registerHistoryListener }: PropsWithChildr
           lastPathname: leavingLocationInfo.pathname, // The URL we just came from
           pathname: location.pathname, // The current (destination) URL
           search: location.search,
-          params: (incomingRouteParams.current?.params as RouteParams | undefined) ?? {},
+          params: incomingRouteParams.current?.params
+            ? filterUndefinedParams(incomingRouteParams.current.params as RouteParams)
+            : {},
           prevRouteLastPathname: leavingLocationInfo.lastPathname, // The lastPathname of the route we are leaving
         };
         // It's a linear navigation.

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

@@ -14,44 +14,6 @@ import { findRoutesNode } from './utils/findRoutesNode';
 import { derivePathnameToMatch } from './utils/derivePathnameToMatch';
 import { matchPath } from './utils/matchPath';
 
-// Debug helper to check if a view item contains a Navigate component
-const isNavigateViewItem = (viewItem: ViewItem | undefined): boolean => {
-  if (!viewItem) return false;
-  const elementComponent = viewItem.reactElement?.props?.element;
-  return (
-    React.isValidElement(elementComponent) &&
-    (elementComponent.type === Navigate ||
-      (typeof elementComponent.type === 'function' && elementComponent.type.name === 'Navigate'))
-  );
-};
-
-/**
- * Checks if a route matches the remaining path.
- * Note: This function is used for checking if ANY route could match, not for determining priority.
- * Wildcard routes are handled specially - they're always considered potential matches but should
- * be used as fallbacks when no specific route matches.
- */
-const doesRouteMatchRemainingPath = (route: React.ReactElement, remainingPath: string) => {
-  const routePath = route.props.path;
-  const isWildcardOnly = routePath === '*' || routePath === '/*';
-  const isIndex = route.props.index;
-
-  // Index routes only match when remaining path is empty
-  if (isIndex) {
-    return remainingPath === '' || remainingPath === '/';
-  }
-
-  // Wildcard routes can match any path (used as fallback)
-  if (isWildcardOnly) {
-    return true; // Wildcards can always potentially match
-  }
-
-  return !!matchPath({
-    pathname: remainingPath,
-    componentProps: route.props,
-  });
-};
-
 /**
  * Checks if a route is a specific match (not wildcard or index).
  */
@@ -650,9 +612,12 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
             // Skip removal only for container-to-container transitions (nested outlet redirects)
             // Remove the leaving view if it's a specific route being replaced
             if (!(isEnteringContainerRoute && !isLeavingSpecificRoute)) {
+              // Capture leavingViewItem for the closure since TypeScript can't
+              // track the outer if-block's null check through the setTimeout
+              const viewToUnmount = leavingViewItem;
               setTimeout(() => {
                 // Use a timeout to ensure the transition completes before removal
-                this.context.unMountViewItem(leavingViewItem);
+                this.context.unMountViewItem(viewToUnmount);
               }, 250);
             }
           }

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

@@ -1,8 +1,11 @@
 import React from 'react';
-import type { RouteObject, AgnosticRouteMatch } from 'react-router';
+import type { RouteObject } from 'react-router';
 import { matchRoutes } from 'react-router-dom';
 import { Route } from 'react-router-dom';
 
+// Type for the result of matchRoutes - inferred from the function return type
+type RouteMatch = NonNullable<ReturnType<typeof matchRoutes>>[number];
+
 /**
  * Sorts routes by specificity. React Router's matchRoutes respects route order,
  * so we need to ensure more specific routes come before wildcards.
@@ -98,7 +101,7 @@ export function createRouteObjectsFromChildren(children: React.ReactNode): Route
 export function findMatchingRoutes(
   children: React.ReactNode,
   pathname: string
-): AgnosticRouteMatch<string, RouteObject>[] | null {
+): RouteMatch[] | null {
   const routes = createRouteObjectsFromChildren(children);
   return matchRoutes(routes, pathname);
 }

packages/react-router/src/ReactRouter/utils/matchRoutesFromChildren.ts

@@ -2,6 +2,12 @@
   "name": "react-router-new",
   "version": "0.0.1",
   "private": true,
+  "overrides": {
+    "@ionic/react-router": {
+      "react-router": "$react-router",
+      "react-router-dom": "$react-router-dom"
+    }
+  },
   "dependencies": {
     "@ionic/react": "^8.6.1",
     "@ionic/react-router": "^8.6.1",

packages/react-router/test/apps/reactrouter6/package.json

@@ -1,5 +1,6 @@
-import React from 'react';
 import { render } from '@testing-library/react';
+import React from 'react';
+
 import App from './App';
 
 test('renders without crashing', () => {