From 93bd4afb1d535dba61de16bea60e896d34f3bb60 Mon Sep 17 00:00:00 2001
From: Ely Lucas <ely@meta-tek.net>
Date: Mon, 25 Nov 2019 11:15:03 -0700
Subject: [PATCH] chore(react): fix tabs docs (#19995)

---
 core/src/components/tabs/readme.md | 58 ++++++++++++++++--------------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index 48a37bd8454..0949efcbaed 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -176,34 +176,38 @@ 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 = () => (
-  <IonTabs>
-    <IonTabBar slot="bottom">
-      <IonTabButton tab="schedule">
-        <IonIcon name="calendar" />
-        <IonLabel>Schedule</IonLabel>
-        <IonBadge>6</IonBadge>
-      </IonTabButton>
-
-      <IonTabButton tab="speakers">
-        <IonIcon name="contacts" />
-        <IonLabel>Speakers</IonLabel>
-      </IonTabButton>
-
-      <IonTabButton tab="map">
-        <IonIcon name="map" />
-        <IonLabel>Map</IonLabel>
-      </IonTabButton>
-
-      <IonTabButton tab="about">
-        <IonIcon name="information-circle" />
-        <IonLabel>About</IonLabel>
-      </IonTabButton>
-    </IonTabBar>
-  </IonTabs>
+<IonTabs>
+  <IonRouterOutlet>
+    <Redirect exact path="/" to="/tabs/schedule" />
+    {/* 
+      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.        
+    */}
+    <Route path="/tabs/schedule" render={() => <SchedulePage />} exact={true} />
+    <Route path="/tabs/speakers" render={() => <SpeakerList />} exact={true} />
+    <Route path="/tabs/map" render={() => <MapView />} exact={true} />
+    <Route path="/tabs/about" render={() => <About />} exact={true} />
+  </IonRouterOutlet>
+  <IonTabBar slot="bottom">
+    <IonTabButton tab="schedule" href="/tabs/schedule">
+      <IonIcon icon={calendar} />
+      <IonLabel>Schedule</IonLabel>
+    </IonTabButton>
+    <IonTabButton tab="speakers" href="/tabs/speakers">
+      <IonIcon icon={contacts} />
+      <IonLabel>Speakers</IonLabel>
+    </IonTabButton>
+    <IonTabButton tab="map" href="/tabs/map">
+      <IonIcon icon={map} />
+      <IonLabel>Map</IonLabel>
+    </IonTabButton>
+    <IonTabButton tab="about" href="/tabs/about">
+      <IonIcon icon={informationCircle} />
+      <IonLabel>About</IonLabel>
+    </IonTabButton>
+  </IonTabBar>
+</IonTabs>
 );
 ```