@ionic/react 8.8.1-dev.11774273905.1c3b9598 → 8.8.1-dev.11774384072.1e807ca8

package/dist/index.js

@@ -729,6 +729,11 @@ const createRoutingComponent = (tagName, customElement) => {
             this.handleClick = (e) => {
                 const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
                 if (routerLink !== undefined) {
+                    // Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
+                    // without triggering SPA navigation on the current page.
+                    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+                        return;
+                    }
                     e.preventDefault();
                     this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
                 }
@@ -1885,6 +1890,9 @@ const IonRouterContext = React.createContext({
     back: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },
+    navigateRoot: () => {
+        throw new Error('An Ionic Router is required for IonRouterContext');
+    },
     canGoBack: () => {
         throw new Error('An Ionic Router is required for IonRouterContext');
     },
@@ -1901,9 +1909,10 @@ function useIonRouter() {
         back: context.back,
         push: context.push,
         goBack: context.back,
+        navigateRoot: context.navigateRoot,
         canGoBack: context.canGoBack,
         routeInfo: context.routeInfo,
-    }), [context.back, context.push, context.canGoBack, context.routeInfo]);
+    }), [context.back, context.push, context.navigateRoot, context.canGoBack, context.routeInfo]);
 }
 
 class CreateAnimation extends React.PureComponent {
@@ -2499,6 +2508,9 @@ class NavManager extends React.PureComponent {
             back: (animationBuilder) => {
                 this.goBack(undefined, animationBuilder);
             },
+            navigateRoot: (pathname, animationBuilder) => {
+                this.props.onNavigateRoot(pathname, animationBuilder);
+            },
             canGoBack: () => this.props.locationHistory.canGoBack(),
             nativeBack: () => this.props.onNativeBack(),
             routeInfo: this.props.routeInfo,