diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 0949efcbaed..48a37bd8454 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -176,38 +176,34 @@ will match the following tab:
### React
```tsx
+import React from 'react';
+import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonBadge } from '@ionic/react';
+
export const TabsExample: React.FC = () => (
-
-
-
- {/*
- Using the render method prop cuts down the number of renders your components will have due to route changes.
- Use the component prop when your component depends on the RouterComponentProps passed in automatically.
- */}
- } exact={true} />
- } exact={true} />
- } exact={true} />
- } exact={true} />
-
-
-
-
- Schedule
-
-
-
- Speakers
-
-
-
- Map
-
-
-
- About
-
-
-
+
+
+
+
+ Schedule
+ 6
+
+
+
+
+ Speakers
+
+
+
+
+ Map
+
+
+
+
+ About
+
+
+
);
```
diff --git a/packages/react-router/src/ReactRouter/IonRouteAction.ts b/packages/react-router/src/ReactRouter/IonRouteAction.ts
new file mode 100644
index 00000000000..7e03063166e
--- /dev/null
+++ b/packages/react-router/src/ReactRouter/IonRouteAction.ts
@@ -0,0 +1 @@
+export type IonRouteAction = 'push' | 'replace' | 'pop';
diff --git a/packages/react-router/src/ReactRouter/NavManager.tsx b/packages/react-router/src/ReactRouter/NavManager.tsx
index edcb6461735..23ac122330f 100644
--- a/packages/react-router/src/ReactRouter/NavManager.tsx
+++ b/packages/react-router/src/ReactRouter/NavManager.tsx
@@ -4,11 +4,12 @@ import { Location as HistoryLocation, UnregisterCallback } from 'history';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
+import { IonRouteAction } from './IonRouteAction';
import { StackManager } from './StackManager';
interface NavManagerProps extends RouteComponentProps {
onNavigateBack: (defaultHref?: string) => void;
- onNavigate: (type: 'push' | 'replace', path: string, state?: any) => void;
+ onNavigate: (type: 'push' | 'replace' | 'pop', path: string, state?: any) => void;
}
export class NavManager extends React.Component {
@@ -24,7 +25,7 @@ export class NavManager extends React.Component { return; }, // overridden in View for each IonPage
+ registerIonPage: () => { return; } // overridden in View for each IonPage
};
this.listenUnregisterCallback = this.props.history.listen((location: HistoryLocation) => {
@@ -52,8 +53,8 @@ export class NavManager extends React.Component {
listenUnregisterCallback: UnregisterCallback | undefined;
activeIonPageId?: string;
- currentDirection?: RouterDirection;
+ currentIonRouteAction?: IonRouteAction;
+ currentRouteDirection?: RouterDirection;
locationHistory = new LocationHistory();
- routes: { [key: string]: any; } = {};
+ routes: { [key: string]: React.ReactElement; } = {};
+ ionPageElements: { [key: string]: HTMLElement; } = {};
+ routerOutlets: { [key: string]: HTMLIonRouterOutletElement; } = {};
+ firstRender = true;
constructor(props: RouteComponentProps) {
super(props);
@@ -52,7 +57,8 @@ class RouteManager extends React.Component {
- if (routerOutlet.componentOnReady) {
- routerOutlet.dispatchEvent(new Event('routerOutletReady'));
- return;
- } else {
- setTimeout(() => {
- waitUntilReady();
- }, 0);
- }
- };
-
- await waitUntilReady();
const canStart = () => {
const config = getConfig();
@@ -329,20 +324,13 @@ class RouteManager extends React.Component {
- const viewStacks = Object.assign(new ViewStacks(), state.viewStacks);
- const { view } = viewStacks.findViewInfoById(viewId);
-
- view!.ionPageElement = page;
- view!.isIonRoute = true;
-
- return {
- viewStacks
- };
-
- }, () => {
- this.setActiveView(this.state.location || this.props.location, this.state.action!);
- });
+ const viewStacks = Object.assign(new ViewStacks(), this.state.viewStacks);
+ const { view } = viewStacks.findViewInfoById(viewId);
+ if (view) {
+ view.isIonRoute = true;
+ this.ionPageElements[view.id] = page;
+ this.setActiveView(this.state.location || this.props.location, this.state.action!, viewStacks);
+ }
}
syncRoute(_id: string, routerOutlet: any) {
@@ -359,43 +347,62 @@ class RouteManager extends React.Component {
+ waitUntilRouterOutletReady(ionRouterOutlet);
+ }, 0);
+ }
+}
+
export const RouteManagerWithRouter = withRouter(RouteManager);
RouteManagerWithRouter.displayName = 'RouteManager';
diff --git a/packages/react-router/src/ReactRouter/StackManager.tsx b/packages/react-router/src/ReactRouter/StackManager.tsx
index 92b7594f34d..b16eab335b2 100644
--- a/packages/react-router/src/ReactRouter/StackManager.tsx
+++ b/packages/react-router/src/ReactRouter/StackManager.tsx
@@ -13,13 +13,10 @@ interface StackManagerProps {
children?: React.ReactNode;
}
-interface StackManagerState {
- routerOutletReady: boolean;
-}
+interface StackManagerState { }
class StackManagerInner extends React.Component {
routerOutletEl: React.RefObject = React.createRef();
-
id: string;
constructor(props: StackManagerProps) {
@@ -27,18 +24,11 @@ class StackManagerInner extends React.Component {
- this.setState({
- routerOutletReady: true
- });
- });
}
static getDerivedStateFromProps(props: StackManagerProps, state: StackManagerState) {
@@ -70,9 +60,7 @@ class StackManagerInner extends React.Component x.show);
const ionRouterOutlet = React.Children.only(this.props.children) as React.ReactElement;
- const { routerOutletReady } = this.state;
-
- const childElements = routerOutletReady ? views.map(view => {
+ const childElements = views.map(view => {
const route = routeManager.getRoute(view.routeId);
return (
);
- }) : ;
+ });
const elementProps: any = {
ref: this.routerOutletEl
diff --git a/packages/react-router/src/ReactRouter/View.tsx b/packages/react-router/src/ReactRouter/View.tsx
index 9ce1561b1de..d31a6f4265e 100644
--- a/packages/react-router/src/ReactRouter/View.tsx
+++ b/packages/react-router/src/ReactRouter/View.tsx
@@ -1,6 +1,5 @@
import { IonLifeCycleContext, NavContext } from '@ionic/react';
import React from 'react';
-import { Redirect, Route } from 'react-router-dom';
import { isDevMode } from '../utils';
@@ -20,20 +19,6 @@ export class View extends React.Component {
context!: React.ContextType;
ionPage?: HTMLElement;
- componentDidMount() {
- /**
- * If we can tell if view is a redirect, hide it so it will work again in future
- */
- const { view, route } = this.props;
- if (route.type === Redirect) {
- this.props.onHideView(view.id);
- } else if (route.type === Route && route.props.render) {
- if (route.props.render().type === Redirect) {
- this.props.onHideView(view.id);
- }
- }
- }
-
componentWillUnmount() {
if (this.ionPage) {
this.ionPage.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
diff --git a/packages/react-router/src/ReactRouter/ViewItem.ts b/packages/react-router/src/ReactRouter/ViewItem.ts
index f9bc4932a62..d5c47907d0e 100644
--- a/packages/react-router/src/ReactRouter/ViewItem.ts
+++ b/packages/react-router/src/ReactRouter/ViewItem.ts
@@ -5,10 +5,7 @@ export interface ViewItem {
key: string;
routeId: string;
- /** The or component associated with the view */
- // route: React.ReactElement;
- /** The reference to the element. */
- ionPageElement?: HTMLElement;
+
/** The routeData for the view. */
routeData: RouteData;
/** Used to track which page pushed the page into view. Used for back button purposes. */
diff --git a/packages/react-router/src/ReactRouter/ViewStacks.ts b/packages/react-router/src/ReactRouter/ViewStacks.ts
index dd37a895cb8..1b98d0802f8 100644
--- a/packages/react-router/src/ReactRouter/ViewStacks.ts
+++ b/packages/react-router/src/ReactRouter/ViewStacks.ts
@@ -6,7 +6,6 @@ import { ViewItem } from './ViewItem';
export interface ViewStack {
id: string;
- routerOutlet: HTMLIonRouterOutletElement;
views: ViewItem[];
}
diff --git a/packages/react-router/tslint.json b/packages/react-router/tslint.json
index d46400c97a3..ae565fc39b6 100644
--- a/packages/react-router/tslint.json
+++ b/packages/react-router/tslint.json
@@ -30,6 +30,8 @@
"jsx-wrap-multiline": false,
"forin": false,
"strict-type-predicates": false,
- "no-unused-expression": false
+ "no-unused-expression": false,
+ "no-constant-condition": false,
+ "no-empty-interface": false
}
}
diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index c22c32257df..067661f0230 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -75,7 +75,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component any;
getStackManager: () => any;
goBack: (defaultHref?: string) => void;
- navigate: (path: string, direction?: RouterDirection | 'none', type?: 'push' | 'replace') => void;
+ navigate: (path: string, direction?: RouterDirection | 'none', ionRouteAction?: 'push' | 'replace' | 'pop') => void;
hasIonicRouter: () => boolean;
registerIonPage: (page: HTMLElement) => void;
currentPath: string | undefined;