Router half functional

src/App.tsx

@@ -1,5 +1,13 @@
-import { IonNav, setupIonicReact } from '@ionic/react';
+import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react';
+import { Redirect, Route } from 'react-router-dom';
+import { IonReactRouter } from '@ionic/react-router';
 import HomePage from './pages/HomePage';
+import ListBiographies from './pages/ListBiographies';
+import Biography from './pages/Biography';
+import ListCapsules from './pages/ListCapsules';
+import Capsule from './pages/Capsule';
+import Questions from './pages/Questions';
+import AboutUs from './pages/AboutUs';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/react/css/core.css';
@@ -22,8 +30,39 @@ import './theme/variables.css';
 
 setupIonicReact();
 
+//<IonNav root={() => <HomePage />}></IonNav>
+
 const App: React.FC = () => (
-  <IonNav root={() => <HomePage />}></IonNav>
+  <IonApp>
+    <IonReactRouter>
+      <IonRouterOutlet>
+        <Route path="/" exact={true}>
+          <Redirect to="/home" />
+        </Route>
+        <Route path="/home" exact={true}>
+          <HomePage />
+        </Route>
+        <Route path="/ListBiographie">
+          <ListBiographies />
+        </Route>
+        <Route path="/Biographie/:id">
+          <Biography />
+        </Route>
+        <Route path="/ListCapsules">
+          <ListCapsules />
+        </Route>
+        <Route path="/Capsule">
+          <Capsule />
+        </Route>
+        <Route path="/Question">
+          <Questions />
+        </Route>
+        <Route path="/About">
+          <AboutUs />
+        </Route>
+      </IonRouterOutlet>
+    </IonReactRouter>
+  </IonApp>
 );
 
 export default App;

src/data/BioInfo.ts

@@ -4,6 +4,8 @@ export interface BioInfo {
     id: number;
     title: string;
     content: string;
+    Text1: string;
+    Text2: string;
     tags: string;
     photo: string;
 }

src/data/Biograph.json

@@ -3,6 +3,8 @@
         "id": 1,
         "title": "Roberto Clemente",
         "content": "Pelotero, Filántropo Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos...",
+        "Text1": "Fue un afamado pelotero puertorriqueño que formó parte de las Grandes Ligas de Estados Unidos. El notable jardinero derecho y bateador fue el primer latinoamericano en formar parte del Salón de la Fama del Béisbol de Estados Unidos. También fue conocido por su labor filantrópica.",
+        "Text2": "Nació el 18 de agosto de 1934 en San Antón, Carolina. Sus padres fueron Melchor Clemente y Luisa Walker. Desde los ocho años mostró habilidades deportivas con su participación en programas de pequeñas ligas y atletismo infantil. Se destacó en pista y campo, deporte en el que ganó varias medallas, específicamente en tiro de jabalina y distancias cortas. Con apenas 14 años, ya formaba parte del equipo de softball de Sello Rojo, compañía procesadora de arroz. Más adelante, formó parte del equipo de pelota aficionado de Juncos. En 1952, con 18 años de edad, ingresó a la liga de beisbol profesional de Puerto Rico, cuando fue contratado por los Cangrejeros de Santurce. El tiempo que formó parte de este equipo fue crucial para su carrera, ya que pudo pulir sus destrezas deportivas.",
         "tags": "Deportista, Puertorriqueño",
         "photo": "require('../assets/RobertoClemente.jpg')"
     },
@@ -10,13 +12,17 @@
         "id": 2,
         "title": "Marian Villaronga Toro",
         "content": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio....",
+        "Text1": "Durante su incumbencia como secretario de Instrucción Pública se fundó la Editorial del Departamento, el servicio público de radio y televisión educativa, la Escuela Libre de Música y se adoptó el español como lengua oficial de la enseñanza en todos los niveles del sistema de educación pública en Puerto Rico.",
+        "Text2": "Mariano Villaronga Toro nació el 9 de noviembre de 1906 en el pueblo sureño de Ponce. Realizó sus estudios universitarios en la Universidad de Puerto Rico en Río Piedras, donde en 1929 completó un bachillerato en ciencias. Luego, se desempeñó como maestro en el sistema público del país y más adelante, como principal de escuela.",
         "tags": "Educador, Funcionario público, Puertorriqueño",
         "photo": "require('../assets/MarianoVillaronga.jpg')"
     },
     {
         "id": 3,
-        "title": "German Rieckhoff Sampoyo",
+        "title": "German Rieckhoff Sampayo",
         "content": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR)....",
+        "Text1": "Germán Rieckehoff Sampayo fue un pilar del olimpismo y defensor de la soberanía deportiva puertorriqueña. Fue presidente del Comité Olímpico de Puerto Rico (COPUR) de 1977 a 1989 y fue el primer puertorriqueño en ser miembro del Comité Olímpico Internacional. Durante su incumbencia, fundó el Albergue Olímpico ubicado en el pueblo de Salinas.",
+        "Text2": "Nació el 15 de febrero de 1915 en Vieques, hijo de la maestra Angelita Sampayo y del contador Germán Rieckehoff Morales, descendiente de emigrantes alemanes que fue electo a la Cámara de Representantes por el partido Alianza Puertorriqueña en el distrito electoral de Vieques, Fajardo y Culebra (1925-1928). Su educación primaria la realizó en su pueblo natal, en el Instituto Politécnico en San Germán y en la escuela Hawthorne en Río Piedras. Es para esta época que comienza su interés por los deportes; practicaba baloncesto, béisbol y formó parte de los niños escucha (boy scouts). Comenzó la escuela superior de la Universidad de Puerto Rico (UHS), en Río Piedras, pero abandonó los estudios en 1931.",
         "tags": "Líder deportivo, Abogado, Puertorriqueño",
         "photo": "require('../assets/DonGermán.jpg')"
     }

src/pages/AboutUs.tsx

@@ -6,17 +6,14 @@ import {
   IonPage,
   IonToolbar,
   IonFooter,
-  IonNavLink,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './AboutUs.css';
-import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import About from '../data/About.json'
 
@@ -52,11 +49,9 @@ const AboutUs: React.FC = () => {
       </IonContent>
       <IonFooter>
         <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/home"></IonBackButton>
+          </IonButtons>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/Biography.tsx

@@ -7,23 +7,31 @@ import {
     IonFooter,
     IonNavLink,
     IonButton,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButtons,
+    IonBackButton,
+    useIonViewWillEnter
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
-import React from 'react';
+import { useParams } from 'react-router';
+import React, { useState } from 'react';
+import { BioInfo, getMessage } from '../data/BioInfo';
 import './Biography.css';
-import ListBiographies from './ListBiographies';
 import Questions from './Questions';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
-import ListBio from '../data/Biograph.json';
 
 const Biography: React.FC = () => {
+    const [bioinfo, setMessage] = useState<BioInfo>();
+    const params = useParams<{ id: string }>();
+
+    useIonViewWillEnter(() => {
+        const msg = getMessage(parseInt(params.id, 10));
+        setMessage(msg);
+    });
+
     return (
         <IonPage>
             <IonHeader>
@@ -41,31 +49,28 @@ const Biography: React.FC = () => {
                 </IonToolbar>
             </IonHeader>
             <IonContent fullscreen className="ion-padding">
-                {
-                    ListBio && ListBio.map(listbio => {
-                        return (
-                            <>
-                                <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                                <h1>{listbio.title}</h1>
+                {bioinfo ? (
+                    <>
+                        <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                        <h1>{bioinfo.title}</h1>
 
-                                <p>{listbio.tags}</p>
-                                <p>{listbio.content}</p>
-                                <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                                    <IonButton>Tomar quiz</IonButton>
-                                </IonNavLink>
-                            </>
-                        )
-                    })
-                }
+                        <p>{bioinfo.tags}</p>
+                        <p>{bioinfo.Text1}</p>
+                        <p>{bioinfo.Text2}</p>
+                        <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                            <IonButton>Tomar quiz</IonButton>
+                        </IonNavLink>
+                    </>
+                ) : (
+                    <div>Message not found</div>
+                )}
             </IonContent>
 
             <IonFooter>
                 <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
-                        <IonTabButton tab="ListBiographies" href="/ListBiographies">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                    <IonButtons slot="start">
+                        <IonBackButton defaultHref="/home"></IonBackButton>
+                    </IonButtons>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/Capsule.tsx

@@ -6,18 +6,16 @@ import {
     IonToolbar,
     IonFooter,
     IonNavLink,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonGrid,
     IonRow,
     IonCol,
-    IonButton
+    IonButton,
+    IonButtons,
+    IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './Capsule.css';
-import ListCapsules from './ListCapsules';
 import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import Bomba from '../assets/BombaPuertorriquena.jpg';
@@ -61,11 +59,9 @@ const Capsule: React.FC = () => {
             </IonContent>
             <IonFooter>
                 <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
-                        <IonTabButton tab="ListCapsules" href="/ListCapsules">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                    <IonButtons slot="start">
+                        <IonBackButton defaultHref="/ListCapsules"></IonBackButton>
+                    </IonButtons>
                 </IonToolbar>
             </IonFooter>
         </IonPage>

src/pages/HomePage.tsx

@@ -1,6 +1,5 @@
 import {
   IonContent,
-  IonButton,
   IonHeader,
   IonPage,
   IonTitle,
@@ -9,7 +8,6 @@ import {
   IonCardHeader,
   IonCardSubtitle,
   IonCardTitle,
-  IonNavLink,
   IonFooter,
   IonTabButton,
   IonIcon,
@@ -17,13 +15,11 @@ import {
   IonImg,
   IonCol,
   IonGrid,
-  IonRow
+  IonRow,
+  IonItem
 } from '@ionic/react';
 import { square } from 'ionicons/icons';
 import './HomePage.css';
-import ListBiographies from './ListBiographies';
-import ListCapsules from './ListCapsules';
-import AboutUs from './AboutUs';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
 const HomePage: React.FC = () => {
@@ -44,37 +40,31 @@ const HomePage: React.FC = () => {
         </IonToolbar>
       </IonHeader>
       <IonContent fullscreen>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardTitle>Biografías</IonCardTitle>
-            <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
-          </IonCardHeader>
-          <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
-            <IonButton size="default" expand="block" shape="round">
-              Buscar
-            </IonButton>
-          </IonNavLink>
-        </IonCard>
-        <IonCard>
-          <IonCardHeader>
-            <IonCardTitle>Cápsulas</IonCardTitle>
-            <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
-          </IonCardHeader>
-          <IonNavLink routerDirection="forward" component={() => <ListCapsules />}>
-            <IonButton size="default" expand="block" shape="round">
-              Buscar
-            </IonButton>
-          </IonNavLink>
-        </IonCard>
+        <IonItem routerLink={`/ListBiographie`} detail={true}>
+          <IonCard>
+            <IonCardHeader>
+              <IonCardTitle>Biografías</IonCardTitle>
+              <IonCardSubtitle>Lista de todas las biografías</IonCardSubtitle>
+            </IonCardHeader>
+          </IonCard>
+        </IonItem>
+        <IonItem routerLink={`/ListCapsules`} detail={true}>
+          <IonCard>
+            <IonCardHeader>
+              <IonCardTitle>Cápsulas</IonCardTitle>
+              <IonCardSubtitle>Lista de todas las cápsulas</IonCardSubtitle>
+            </IonCardHeader>
+          </IonCard>
+        </IonItem>
       </IonContent>
       <IonFooter>
         <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
+          <IonItem routerLink={`/About`} detail={true}>
             <IonTabButton tab="AboutUs" href="/AboutUs">
               <IonIcon icon={square} />
               <IonLabel>Sobre nosotros</IonLabel>
             </IonTabButton>
-          </IonNavLink>
+          </IonItem>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListBiographies.tsx

@@ -14,17 +14,15 @@ import {
   IonButton,
   IonNavLink,
   IonFooter,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton,
+  IonItem
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import './ListBiographies.css';
-import Biography from './Biography';
 import Questions from './Questions';
-import HomePage from './HomePage';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 import ListBio from '../data/Biograph.json';
@@ -53,22 +51,21 @@ const ListBiographies: React.FC = () => {
           ListBio && ListBio.map(listbio => {
             return (
               <>
-                <IonCard>
-                  <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
-                  <IonCardHeader>
-                    <IonCardTitle>{listbio.title}</IonCardTitle>
-                    <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
-                  </IonCardHeader><IonCardContent>
-                    {listbio.content}
-                  </IonCardContent>
-                  <IonNavLink routerDirection="forward" component={() => <Biography />} >
-                    <IonButton>Go to</IonButton>
-                  </IonNavLink>
+                <IonItem routerLink={`/Biographie/${listbio.id}`} detail={true}>
+                  <IonCard>
+                    <IonImg style={{ height: 300, width: 600 }} src={RobertoClemente} alt='Logo'></IonImg>
+                    <IonCardHeader>
+                      <IonCardTitle>{listbio.title}</IonCardTitle>
+                      <IonCardSubtitle>{listbio.tags}</IonCardSubtitle>
+                    </IonCardHeader><IonCardContent>
+                      {listbio.content}
+                    </IonCardContent>
 
-                  <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                    <IonButton>Tomar quiz</IonButton>
-                  </IonNavLink>
-                </IonCard>
+                    <IonNavLink routerDirection="forward" component={() => <Questions />}>
+                      <IonButton>Tomar quiz</IonButton>
+                    </IonNavLink>
+                  </IonCard>
+                </IonItem>
               </>
             )
           })
@@ -76,11 +73,9 @@ const ListBiographies: React.FC = () => {
       </IonContent>
       <IonFooter>
         <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/home"></IonBackButton>
+          </IonButtons>
         </IonToolbar>
       </IonFooter>
     </IonPage>

src/pages/ListCapsules.tsx

@@ -9,19 +9,14 @@ import {
   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
-  IonNavLink,
   IonFooter,
-  IonTabButton,
-  IonIcon,
   IonGrid,
   IonRow,
-  IonCol
+  IonCol,
+  IonButtons,
+  IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import './ListCapsules.css';
-import HomePage from './HomePage';
-import Capsule from './Capsule'
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 
 const ListCapsules: React.FC = () => {
@@ -44,11 +39,8 @@ const ListCapsules: React.FC = () => {
       <IonContent fullscreen>
         <IonSearchbar></IonSearchbar>
         <IonList inset={true}>
-          <IonItem>
+          <IonItem routerLink={`/Capsule`} detail={true}>
             <IonLabel>Breve Historia del baile en Puerto Rico</IonLabel>
-            <IonNavLink routerDirection="forward" component={() => <Capsule />}>
-              <IonButton>Visitar</IonButton>
-            </IonNavLink>
           </IonItem>
           <IonItem>
             <IonLabel>Cápsula#2</IonLabel>
@@ -60,11 +52,9 @@ const ListCapsules: React.FC = () => {
       </IonContent>
       <IonFooter>
         <IonToolbar>
-          <IonNavLink routerDirection="forward" component={() => <HomePage />}>
-            <IonTabButton tab="HomePage" href="/HomePage">
-              <IonIcon icon={arrowBack} />
-            </IonTabButton>
-          </IonNavLink>
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/home"></IonBackButton>
+          </IonButtons>
         </IonToolbar>
       </IonFooter>
     </IonPage>