@ionic/react-router 8.7.12 → 8.7.13-dev.11765426479.16a61ecf

package/dist/types/ReactRouter/IonReactHashRouter.d.ts

@@ -1,23 +1,8 @@
-import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
+/**
+ * `IonReactHashRouter` provides a way to use hash-based routing in Ionic
+ * React applications.
+ */
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { BrowserRouterProps } from 'react-router-dom';
-interface IonReactHashRouterProps extends BrowserRouterProps {
-    history?: History;
-}
-export declare class IonReactHashRouter extends React.Component<IonReactHashRouterProps> {
-    history: History;
-    historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
-    constructor(props: IonReactHashRouterProps);
-    /**
-     * history@4.x passes separate location and action
-     * params. history@5.x passes location and action
-     * together as a single object.
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just assume
-     * a single object with both location and action.
-     */
-    handleHistoryChange(location: HistoryLocation, action: HistoryAction): void;
-    registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void): void;
-    render(): React.JSX.Element;
-}
-export {};
+import type { HashRouterProps } from 'react-router-dom';
+export declare const IonReactHashRouter: ({ children, ...routerProps }: PropsWithChildren<HashRouterProps>) => React.JSX.Element;

package/dist/types/ReactRouter/IonReactMemoryRouter.d.ts

@@ -1,23 +1,9 @@
-import type { Action as HistoryAction, Location as HistoryLocation, MemoryHistory } from 'history';
+/**
+ * `IonReactMemoryRouter` provides a way to use `react-router` in
+ * environments where a traditional browser history (like `BrowserRouter`)
+ * isn't available or desirable.
+ */
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 import type { MemoryRouterProps } from 'react-router';
-interface IonReactMemoryRouterProps extends MemoryRouterProps {
-    history: MemoryHistory;
-}
-export declare class IonReactMemoryRouter extends React.Component<IonReactMemoryRouterProps> {
-    history: MemoryHistory;
-    historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
-    constructor(props: IonReactMemoryRouterProps);
-    /**
-     * history@4.x passes separate location and action
-     * params. history@5.x passes location and action
-     * together as a single object.
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just assume
-     * a single object with both location and action.
-     */
-    handleHistoryChange(location: HistoryLocation, action: HistoryAction): void;
-    registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void): void;
-    render(): React.JSX.Element;
-}
-export {};
+export declare const IonReactMemoryRouter: ({ children, ...routerProps }: PropsWithChildren<MemoryRouterProps>) => React.JSX.Element;

package/dist/types/ReactRouter/IonReactRouter.d.ts

@@ -1,23 +1,10 @@
-import type { Action as HistoryAction, History, Location as HistoryLocation } from 'history';
+/**
+ * `IonReactRouter` facilitates the integration of Ionic's specific
+ * navigation and UI management with the standard React Router mechanisms,
+ * allowing an inner Ionic-specific router (`IonRouter`) to react to
+ * navigation events.
+ */
+import type { PropsWithChildren } from 'react';
 import React from 'react';
 import type { BrowserRouterProps } from 'react-router-dom';
-interface IonReactRouterProps extends BrowserRouterProps {
-    history?: History;
-}
-export declare class IonReactRouter extends React.Component<IonReactRouterProps> {
-    historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
-    history: History;
-    constructor(props: IonReactRouterProps);
-    /**
-     * history@4.x passes separate location and action
-     * params. history@5.x passes location and action
-     * together as a single object.
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just assume
-     * a single object with both location and action.
-     */
-    handleHistoryChange(location: HistoryLocation, action: HistoryAction): void;
-    registerHistoryListener(cb: (location: HistoryLocation, action: HistoryAction) => void): void;
-    render(): React.JSX.Element;
-}
-export {};
+export declare const IonReactRouter: ({ children, ...browserRouterProps }: PropsWithChildren<BrowserRouterProps>) => React.JSX.Element;

package/dist/types/ReactRouter/IonRouteInner.d.ts

@@ -1,5 +1,3 @@
 import type { IonRouteProps } from '@ionic/react';
 import React from 'react';
-export declare class IonRouteInner extends React.PureComponent<IonRouteProps> {
-    render(): React.JSX.Element;
-}
+export declare const IonRouteInner: ({ path, element }: IonRouteProps) => React.JSX.Element;

package/dist/types/ReactRouter/IonRouter.d.ts

@@ -1,44 +1,24 @@
-import type { AnimationBuilder, RouteAction, RouteInfo, RouteManagerContextState, RouterDirection, ViewItem } from '@ionic/react';
-import { LocationHistory } from '@ionic/react';
-import type { Action as HistoryAction, Location as HistoryLocation } from 'history';
+/**
+ * `IonRouter` is responsible for managing the application's navigation
+ * state, tracking the history of visited routes, and coordinating
+ * transitions between different views. It intercepts route changes from
+ * React Router and translates them into actions that Ionic can understand
+ * and animate.
+ */
+import type { RouterDirection, RouterOptions } from '@ionic/react';
+import type { Action as HistoryAction, Location } from 'history';
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-import type { RouteComponentProps } from 'react-router-dom';
-import { ReactRouterViewStack } from './ReactRouterViewStack';
+type HistoryLocation = Location;
 export interface LocationState {
     direction?: RouterDirection;
-    routerOptions?: {
-        as?: string;
-        unmount?: boolean;
-    };
+    routerOptions?: RouterOptions;
 }
-interface IonRouteProps extends RouteComponentProps<{}, {}, LocationState> {
-    registerHistoryListener: (cb: (location: HistoryLocation<any>, action: HistoryAction) => void) => void;
+interface IonRouterProps {
+    registerHistoryListener: (cb: (location: HistoryLocation, action: HistoryAction) => void) => void;
 }
-interface IonRouteState {
-    routeInfo: RouteInfo;
-}
-declare class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
-    currentTab?: string;
-    exitViewFromOtherOutletHandlers: ((pathname: string) => ViewItem | undefined)[];
-    incomingRouteParams?: Partial<RouteInfo>;
-    locationHistory: LocationHistory;
-    viewStack: ReactRouterViewStack;
-    routeMangerContextState: RouteManagerContextState;
-    constructor(props: IonRouteProps);
-    handleChangeTab(tab: string, path?: string, routeOptions?: any): void;
-    handleHistoryChange(location: HistoryLocation<LocationState>, action: HistoryAction): void;
-    /**
-     * history@4.x uses goBack(), history@5.x uses back()
-     * TODO: If support for React Router <=5 is dropped
-     * this logic is no longer needed. We can just
-     * assume back() is available.
-     */
-    handleNativeBack(): void;
-    handleNavigate(path: string, routeAction: RouteAction, routeDirection?: RouterDirection, routeAnimation?: AnimationBuilder, routeOptions?: any, tab?: string): void;
-    handleNavigateBack(defaultHref?: string | RouteInfo, routeAnimation?: AnimationBuilder): void;
-    handleResetTab(tab: string, originalHref: string, originalRouteOptions: any): void;
-    handleSetCurrentTab(tab: string): void;
-    render(): React.JSX.Element;
-}
-export declare const IonRouter: React.ComponentClass<Pick<IonRouteProps, "registerHistoryListener">, any> & import("react-router").WithRouterStatics<typeof IonRouterInner>;
+export declare const IonRouter: {
+    ({ children, registerHistoryListener }: PropsWithChildren<IonRouterProps>): React.JSX.Element;
+    displayName: string;
+};
 export {};

package/dist/types/ReactRouter/ReactRouterViewStack.d.ts

@@ -1,15 +1,68 @@
+/**
+ * `ReactRouterViewStack` is a custom navigation manager used in Ionic React
+ * apps to map React Router route elements (such as `<IonRoute>`) to "view
+ * items" that Ionic can manage in a view stack. This is critical to maintain
+ * Ionic’s animation, lifecycle, and history behavior across views.
+ */
 import type { RouteInfo, ViewItem } from '@ionic/react';
 import { ViewStacks } from '@ionic/react';
 import React from 'react';
 export declare class ReactRouterViewStack extends ViewStacks {
+    private viewItemCounter;
     constructor();
-    createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement): ViewItem<any>;
-    getChildrenToRender(outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo): React.JSX.Element[];
-    findViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, updateMatch?: boolean): ViewItem<any> | undefined;
-    findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute?: boolean): ViewItem<any> | undefined;
-    findViewItemByPathname(pathname: string, outletId?: string): ViewItem<any> | undefined;
     /**
-     * Returns the matching view item and the match result for a given pathname.
+     * Creates a new view item for the given outlet and react route element.
+     * Associates route props with the matched route path for further lookups.
+     */
+    createViewItem: (outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) => ViewItem<any>;
+    /**
+     * Renders a ViewLifeCycleManager for the given view item.
+     * Handles cleanup if the view no longer matches.
+     *
+     * - Deactivates view if it no longer matches the current route
+     * - Wraps the route element in <Routes> to support nested routing and ensure remounting
+     * - Adds a unique key to <Routes> so React Router remounts routes when switching
+     */
+    private renderViewItem;
+    /**
+     * Re-renders all active view items for the specified outlet.
+     * Ensures React elements are updated with the latest match.
+     *
+     * 1. Iterates through children of IonRouterOutlet
+     * 2. Updates each matching viewItem with the current child React element
+     *    (important for updating props or changes to elements)
+     * 3. Returns a list of React components that will be rendered inside the outlet
+     *    Each view is wrapped in <ViewLifeCycleManager> to manage lifecycle and rendering
+     */
+    getChildrenToRender: (outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo) => React.JSX.Element[];
+    /**
+     * Finds a view item matching the current route, optionally updating its match state.
+     */
+    findViewItemByRouteInfo: (routeInfo: RouteInfo, outletId?: string, updateMatch?: boolean) => ViewItem<any> | undefined;
+    /**
+     * Finds the view item that was previously active before a route change.
+     */
+    findLeavingViewItemByRouteInfo: (routeInfo: RouteInfo, outletId?: string, mustBeIonRoute?: boolean) => ViewItem<any> | undefined;
+    /**
+     * Finds a view item by pathname only, used in simpler queries.
+     */
+    findViewItemByPathname: (pathname: string, outletId?: string) => ViewItem<any> | undefined;
+    /**
+     * Core function that matches a given pathname against all view items.
+     * Returns both the matched view item and match metadata.
      */
     private findViewItemByPath;
+    /**
+     * Clean up old, unmounted view items to prevent memory leaks
+     */
+    private cleanupStaleViewItems;
+    /**
+     * Override add to prevent duplicate view items with the same ID in the same outlet
+     * But allow multiple view items for the same route path (for navigation history)
+     */
+    add: (viewItem: ViewItem) => void;
+    /**
+     * Override remove
+     */
+    remove: (viewItem: ViewItem) => void;
 }

package/dist/types/ReactRouter/utils/computeParentPath.d.ts

@@ -0,0 +1,57 @@
+import type React from 'react';
+/**
+ * Finds the longest common prefix among an array of paths.
+ * Used to determine the scope of an outlet with absolute routes.
+ *
+ * @param paths An array of absolute path strings.
+ * @returns The common prefix shared by all paths.
+ */
+export declare const computeCommonPrefix: (paths: string[]) => string;
+/**
+ * Checks if a route is a specific match (not wildcard or index).
+ *
+ * @param route The route element to check.
+ * @param remainingPath The remaining path to match against.
+ * @returns True if the route specifically matches the remaining path.
+ */
+export declare const isSpecificRouteMatch: (route: React.ReactElement, remainingPath: string) => boolean;
+/**
+ * Result of parent path computation.
+ */
+export interface ParentPathResult {
+    parentPath: string | undefined;
+    outletMountPath: string | undefined;
+}
+interface RouteAnalysis {
+    hasRelativeRoutes: boolean;
+    hasIndexRoute: boolean;
+    hasWildcardRoute: boolean;
+    routeChildren: React.ReactElement[];
+}
+/**
+ * Analyzes route children to determine their characteristics.
+ *
+ * @param routeChildren The route children to analyze.
+ * @returns Analysis of the route characteristics.
+ */
+export declare const analyzeRouteChildren: (routeChildren: React.ReactElement[]) => RouteAnalysis;
+interface ComputeParentPathOptions {
+    currentPathname: string;
+    outletMountPath: string | undefined;
+    routeChildren: React.ReactElement[];
+    hasRelativeRoutes: boolean;
+    hasIndexRoute: boolean;
+    hasWildcardRoute: boolean;
+}
+/**
+ * Computes the parent path for a nested outlet based on the current pathname
+ * and the outlet's route configuration.
+ *
+ * The algorithm finds the shortest parent path where a route matches the remaining path.
+ * Priority: specific routes > wildcard routes > index routes (only at mount point)
+ *
+ * @param options The options for computing the parent path.
+ * @returns The computed parent path result.
+ */
+export declare const computeParentPath: (options: ComputeParentPathOptions) => ParentPathResult;
+export {};

package/dist/types/ReactRouter/utils/pathMatching.d.ts

@@ -0,0 +1,31 @@
+import type { PathMatch } from 'react-router';
+/**
+ * Options for the matchPath function.
+ */
+interface MatchPathOptions {
+    /**
+     * The pathname to match against.
+     */
+    pathname: string;
+    /**
+     * The props to match against, they are identical to the matching props `Route` accepts.
+     */
+    componentProps: {
+        path?: string;
+        caseSensitive?: boolean;
+        end?: boolean;
+        index?: boolean;
+    };
+}
+/**
+ * The matchPath function is used only for matching paths, not rendering components or elements.
+ * @see https://reactrouter.com/v6/utils/match-path
+ */
+export declare const matchPath: ({ pathname, componentProps }: MatchPathOptions) => PathMatch<string> | null;
+/**
+ * Determines the portion of a pathname that a given route pattern should match against.
+ * For absolute route patterns we return the full pathname. For relative patterns we
+ * strip off the already-matched parent segments so React Router receives the remainder.
+ */
+export declare const derivePathnameToMatch: (fullPathname: string, routePath?: string) => string;
+export {};

package/dist/types/ReactRouter/utils/pathNormalization.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Ensures the given path has a leading slash.
+ *
+ * @param value The path string to normalize.
+ * @returns The path with a leading slash.
+ */
+export declare const ensureLeadingSlash: (value: string) => string;
+/**
+ * Strips the trailing slash from a path, unless it's the root path.
+ *
+ * @param value The path string to normalize.
+ * @returns The path without a trailing slash.
+ */
+export declare const stripTrailingSlash: (value: string) => string;
+/**
+ * Normalizes a pathname for comparison by ensuring a leading slash
+ * and removing trailing slashes.
+ *
+ * @param value The pathname to normalize, can be undefined.
+ * @returns A normalized pathname string.
+ */
+export declare const normalizePathnameForComparison: (value: string | undefined) => string;

package/dist/types/ReactRouter/utils/routeElements.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+/**
+ * Extracts the children from a Routes wrapper component.
+ * The use of `<Routes />` is encouraged with React Router v6.
+ *
+ * @param node The React node to extract Routes children from.
+ * @returns The children of the Routes component, or undefined if not found.
+ */
+export declare const getRoutesChildren: (node: React.ReactNode) => React.ReactNode | undefined;
+/**
+ * Extracts Route children from a node (either directly or from a Routes wrapper).
+ *
+ * @param children The children to extract routes from.
+ * @returns An array of Route elements.
+ */
+export declare const extractRouteChildren: (children: React.ReactNode) => React.ReactElement[];
+/**
+ * Checks if a React element is a Navigate component (redirect).
+ *
+ * @param element The element to check.
+ * @returns True if the element is a Navigate component.
+ */
+export declare const isNavigateElement: (element: unknown) => boolean;

package/dist/types/ReactRouter/utils/viewItemUtils.d.ts

@@ -0,0 +1,10 @@
+import type { ViewItem } from '@ionic/react';
+/**
+ * Sorts view items by route specificity (most specific first).
+ * - Exact matches (no wildcards/params) come first
+ * - Among wildcard routes, longer paths are more specific
+ *
+ * @param views The view items to sort.
+ * @returns A new sorted array of view items.
+ */
+export declare const sortViewsBySpecificity: (views: ViewItem[]) => ViewItem[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.7.12",
+  "version": "8.7.13-dev.11765426479.16a61ecf",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,14 +36,14 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "8.7.12",
+    "@ionic/react": "8.7.13-dev.11765426479.16a61ecf",
     "tslib": "*"
   },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1"
+    "react-router": ">=6.0.0",
+    "react-router-dom": ">=6.0.0"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
@@ -52,16 +52,15 @@
     "@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",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "eslint": "^7.32.0",
+    "history": "^5.3.0",
     "prettier": "^2.8.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router": "^5.0.1",
-    "react-router-dom": "^5.0.1",
+    "react-router": "^6.30.0",
+    "react-router-dom": "^6.30.0",
     "rimraf": "^3.0.2",
     "rollup": "^4.2.0",
     "typescript": "^4.0.5"

package/dist/types/ReactRouter/StackManager.d.ts

@@ -1,30 +0,0 @@
-import type { RouteInfo, StackContextState, ViewItem } from '@ionic/react';
-import { RouteManagerContext } from '@ionic/react';
-import React from 'react';
-interface StackManagerProps {
-    routeInfo: RouteInfo;
-}
-interface StackManagerState {
-}
-export declare class StackManager extends React.PureComponent<StackManagerProps, StackManagerState> {
-    id: string;
-    context: React.ContextType<typeof RouteManagerContext>;
-    ionRouterOutlet?: React.ReactElement;
-    routerOutletElement: HTMLIonRouterOutletElement | undefined;
-    prevProps?: StackManagerProps;
-    skipTransition: boolean;
-    stackContextValue: StackContextState;
-    private clearOutletTimeout;
-    private pendingPageTransition;
-    constructor(props: StackManagerProps);
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: StackManagerProps): void;
-    componentWillUnmount(): void;
-    handlePageTransition(routeInfo: RouteInfo): Promise<void>;
-    registerIonPage(page: HTMLElement, routeInfo: RouteInfo): void;
-    setupRouterOutlet(routerOutlet: HTMLIonRouterOutletElement): Promise<void>;
-    transitionPage(routeInfo: RouteInfo, enteringViewItem: ViewItem, leavingViewItem?: ViewItem, direction?: 'forward' | 'back', progressAnimation?: boolean): Promise<void>;
-    render(): React.JSX.Element;
-    static get contextType(): React.Context<import("@ionic/react").RouteManagerContextState>;
-}
-export default StackManager;

package/dist/types/ReactRouter/utils/matchPath.d.ts

@@ -1,21 +0,0 @@
-import { matchPath as reactRouterMatchPath } from 'react-router';
-interface MatchPathOptions {
-    /**
-     * The pathname to match against.
-     */
-    pathname: string;
-    /**
-     * The props to match against, they are identical to the matching props `Route` accepts.
-     */
-    componentProps: {
-        path?: string;
-        from?: string;
-        component?: any;
-        exact?: boolean;
-    };
-}
-/**
- * @see https://v5.reactrouter.com/web/api/matchPath
- */
-export declare const matchPath: ({ pathname, componentProps, }: MatchPathOptions) => false | ReturnType<typeof reactRouterMatchPath>;
-export {};