fix(react): support for 'root' router direction, fixes #19982 (#20052)

ionic-team · Dec 10, 2019 · e116712 · e116712
1 parent 1c7d1e5
commit e116712
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/packages/react-router/src/ReactRouter/NavManager.tsx b/packages/react-router/src/ReactRouter/NavManager.tsx
@@ -9,7 +9,7 @@ import { StackManager } from './StackManager';
 
 interface NavManagerProps extends RouteComponentProps {
   onNavigateBack: (defaultHref?: string) => void;
-  onNavigate: (type: 'push' | 'replace' | 'pop', path: string, state?: any) => void;
+  onNavigate: (ionRouteAction: IonRouteAction, path: string, state?: any) => void;
 }
 
 export class NavManager extends React.Component<NavManagerProps, NavContextState> {

diff --git a/packages/react-router/src/ReactRouter/Router.tsx b/packages/react-router/src/ReactRouter/Router.tsx
@@ -88,7 +88,7 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
   }
 
   historyChange(location: HistoryLocation, action: HistoryAction) {
-    const ionRouteAction = this.currentIonRouteAction === 'pop' ? 'pop' : action.toLowerCase();
+    const ionRouteAction = this.currentIonRouteAction === 'pop' ? 'pop' : action.toLowerCase() as IonRouteAction;
     let direction = this.currentRouteDirection;
 
     if (ionRouteAction === 'push') {
@@ -101,6 +101,11 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
       direction = 'none';
     }
 
+    if (direction === 'root') {
+      this.locationHistory.clear();
+      this.locationHistory.add(location);
+    }
+
     location.state = location.state || { direction };
     this.setState({
       location,
@@ -175,8 +180,15 @@ class RouteManager extends React.Component<RouteComponentProps, RouteManagerStat
           const enteringEl = this.ionPageElements[enteringView.id];
           const leavingEl = leavingView && this.ionPageElements[leavingView.id];
           if (enteringEl) {
-            // Don't animate from an empty view
-            const navDirection = leavingEl && leavingEl.innerHTML === '' ? undefined : direction === 'none' ? undefined : direction;
+            let navDirection: NavDirection | undefined;
+            if (leavingEl && leavingEl.innerHTML === '') {
+              // Don't animate from an empty view
+              navDirection = undefined;
+            } else if (direction === 'none' || direction === 'root') {
+              navDirection = undefined;
+            } else {
+              navDirection = direction;
+            }
             const shouldGoBack = !!enteringView.prevId;
             const routerOutlet = this.routerOutlets[viewStack.id];
             this.commitView(

diff --git a/packages/react-router/src/utils/LocationHistory.ts b/packages/react-router/src/utils/LocationHistory.ts
@@ -3,7 +3,7 @@ import { Location as HistoryLocation } from 'history';
 const RESTRICT_SIZE = 25;
 
 export class LocationHistory {
-  locationHistory: HistoryLocation[] = [];
+  private locationHistory: HistoryLocation[] = [];
 
   add(location: HistoryLocation) {
     this.locationHistory.push(location);
@@ -21,6 +21,10 @@ export class LocationHistory {
     this.locationHistory.push(location);
   }
 
+  clear() {
+    this.locationHistory = [];
+  }
+
   findLastLocationByUrl(url: string) {
     for (let i = this.locationHistory.length - 1; i >= 0; i--) {
       const location = this.locationHistory[i];

diff --git a/packages/react/src/components/hrefprops.ts b/packages/react/src/components/hrefprops.ts
@@ -1,4 +1,4 @@
-export declare type RouterDirection = 'forward' | 'back' | 'none';
+export declare type RouterDirection = 'forward' | 'back' | 'root' | 'none';
 
 export type HrefProps<T> = Omit<T, 'routerDirection'> & {
   routerLink?: string;