@ionic/react-router 9.0.9 → 9.0.10-dev.11793383958.19a7d413

package/dist/index.js

@@ -1,8 +1,7 @@
 import React, { useRef, useState, useEffect, useCallback } from 'react';
-import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, matchRoutes, useLocation, useNavigate, BrowserRouter, useNavigationType, HashRouter } from 'react-router-dom';
+import { Route, matchPath as matchPath$1, Routes, Navigate, UNSAFE_RouteContext, matchRoutes, useLocation, useNavigate, BrowserRouter, useNavigationType, MemoryRouter, HashRouter } from 'react-router-dom';
 import { IonRoute, ViewStacks, generateId, ViewLifeCycleManager, createDebugLogger, StackContext, RouteManagerContext, getConfig, LocationHistory, NavManager } from '@ionic/react';
 import { LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER } from '@ionic/core/components';
-import { MemoryRouter, useLocation as useLocation$1, useNavigationType as useNavigationType$1 } from 'react-router';
 
 const IonRouteInner = ({ path, index, caseSensitive, element }) => {
     return React.createElement(Route, { path: path, index: index, caseSensitive: caseSensitive, element: element });
@@ -646,14 +645,16 @@ const getFallbackParamsFromViewItems = (allViewItems, currentOutletId, currentPa
     return params;
 };
 /**
- * Builds the matches array for RouteContext.
+ * Builds the matches array for RouteContext. The leaf `pathname` uses the absolute base,
+ * because the raw match is relative for a route without a leading slash, which breaks
+ * relative links, and includes a splat's tail, which loops an index `<Navigate>`.
  */
-const buildContextMatches = (parentMatches, combinedParams, routeMatch, routeInfoPathname, absolutePathnameBase, viewItem, routeElement, componentElement) => {
+const buildContextMatches = (parentMatches, combinedParams, absolutePathnameBase, viewItem, routeElement, componentElement) => {
     return [
         ...parentMatches,
         {
             params: combinedParams,
-            pathname: routeMatch?.pathname || routeInfoPathname,
+            pathname: absolutePathnameBase,
             pathnameBase: absolutePathnameBase,
             route: {
                 id: viewItem.id,
@@ -1048,7 +1049,7 @@ class ReactRouterViewStack extends ViewStacks {
             const combinedParams = { ...accumulatedParentParams, ...(routeMatch?.params ?? {}) };
             const parentPathnameBase = parentMatches.length > 0 ? parentMatches[parentMatches.length - 1].pathnameBase : '/';
             const absolutePathnameBase = computeAbsolutePathnameBase(routeElement, routeMatch, parentPathnameBase, routeInfo.pathname);
-            const contextMatches = buildContextMatches(parentMatches, combinedParams, routeMatch, routeInfo.pathname, absolutePathnameBase, viewItem, routeElement, componentElement);
+            const contextMatches = buildContextMatches(parentMatches, combinedParams, absolutePathnameBase, viewItem, routeElement, componentElement);
             const routeContextValue = parentContext
                 ? { ...parentContext, matches: contextMatches }
                 : { outlet: null, matches: contextMatches, isDataRoute: false };
@@ -3754,6 +3755,18 @@ const IonRouter = ({ children, registerHistoryListener }) => {
 };
 IonRouter.displayName = 'IonRouter';
 
+/**
+ * Defaults React Router 7's `useTransitions` to `false`, since a transition can defer the
+ * commit past Ionic's page-visible signal. React Router 6 ignores the prop.
+ *
+ * Uses `??` instead of spreading a default first, because an explicit
+ * `useTransitions={undefined}` would override it and React Router reads that as on.
+ */
+const withTransitionDefaults = (props) => {
+    const { useTransitions } = props;
+    return { ...props, useTransitions: useTransitions ?? false };
+};
+
 /**
  * `IonReactRouter` facilitates the integration of Ionic's specific
  * navigation and UI management with the standard React Router mechanisms,
@@ -3798,7 +3811,7 @@ const RouterContent$2 = ({ children }) => {
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactRouter = ({ children, ...browserRouterProps }) => {
-    return (React.createElement(BrowserRouter, { ...browserRouterProps },
+    return (React.createElement(BrowserRouter, { ...withTransitionDefaults(browserRouterProps) },
         React.createElement(RouterContent$2, null, children)));
 };
 
@@ -3808,8 +3821,8 @@ const IonReactRouter = ({ children, ...browserRouterProps }) => {
  * isn't available or desirable.
  */
 const RouterContent$1 = ({ children }) => {
-    const location = useLocation$1();
-    const navigationType = useNavigationType$1();
+    const location = useLocation();
+    const navigationType = useNavigationType();
     const historyListenHandler = useRef();
     const registerHistoryListener = useCallback((cb) => {
         historyListenHandler.current = cb;
@@ -3837,7 +3850,7 @@ const RouterContent$1 = ({ children }) => {
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactMemoryRouter = ({ children, ...routerProps }) => {
-    return (React.createElement(MemoryRouter, { ...routerProps },
+    return (React.createElement(MemoryRouter, { ...withTransitionDefaults(routerProps) },
         React.createElement(RouterContent$1, null, children)));
 };
 
@@ -3875,7 +3888,7 @@ const RouterContent = ({ children }) => {
     return React.createElement(IonRouter, { registerHistoryListener: registerHistoryListener }, children);
 };
 const IonReactHashRouter = ({ children, ...routerProps }) => {
-    return (React.createElement(HashRouter, { ...routerProps },
+    return (React.createElement(HashRouter, { ...withTransitionDefaults(routerProps) },
         React.createElement(RouterContent, null, children)));
 };