Router fully functional

src/pages/Biography.tsx

@@ -5,23 +5,23 @@ import {
     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
-    IonButton,
     IonImg,
     IonGrid,
     IonRow,
     IonCol,
     IonButtons,
     IonBackButton,
-    useIonViewWillEnter
+    useIonViewWillEnter,
+    IonItem,
+    IonIcon
 } from '@ionic/react';
 import { useParams } from 'react-router';
 import React, { useState } from 'react';
 import { BioInfo, getMessage } from '../data/BioInfo';
 import './Biography.css';
-import Questions from './Questions';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
+import { square } from 'ionicons/icons';
 
 const Biography: React.FC = () => {
     const [bioinfo, setMessage] = useState<BioInfo>();
@@ -57,9 +57,9 @@ const Biography: React.FC = () => {
                         <p>{bioinfo.tags}</p>
                         <p>{bioinfo.Text1}</p>
                         <p>{bioinfo.Text2}</p>
-                        <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                            <IonButton>Tomar quiz</IonButton>
-                        </IonNavLink>
+                        <IonItem routerLink={`/Question`} detail={true}>
+                            <IonIcon icon={square} />Tomar quiz
+                        </IonItem>
                     </>
                 ) : (
                     <div>Message not found</div>

src/pages/ListBiographies.tsx

@@ -11,18 +11,17 @@ import {
   IonPage,
   IonTitle,
   IonToolbar,
-  IonButton,
-  IonNavLink,
   IonFooter,
   IonGrid,
   IonRow,
   IonCol,
   IonButtons,
   IonBackButton,
-  IonItem
+  IonItem,
+  IonIcon
 } from '@ionic/react';
 import './ListBiographies.css';
-import Questions from './Questions';
+import { square } from 'ionicons/icons';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 import ListBio from '../data/Biograph.json';
@@ -60,12 +59,11 @@ const ListBiographies: React.FC = () => {
                     </IonCardHeader><IonCardContent>
                       {listbio.content}
                     </IonCardContent>
-
-                    <IonNavLink routerDirection="forward" component={() => <Questions />}>
-                      <IonButton>Tomar quiz</IonButton>
-                    </IonNavLink>
                   </IonCard>
                 </IonItem>
+                <IonItem routerLink={`/Question`} detail={true}>
+                  <IonIcon icon={square} />Tomar quiz
+                </IonItem>
               </>
             )
           })

src/pages/Questions.tsx

@@ -5,9 +5,6 @@ import {
     IonTitle,
     IonToolbar,
     IonFooter,
-    IonNavLink,
-    IonTabButton,
-    IonIcon,
     IonImg,
     IonItem,
     IonLabel,
@@ -21,12 +18,12 @@ import {
     IonButton,
     IonGrid,
     IonRow,
-    IonCol
+    IonCol,
+    IonButtons,
+    IonBackButton
 } from '@ionic/react';
-import { arrowBack } from 'ionicons/icons';
 import React from 'react';
 import './Questions.css';
-import Biography from './Biography';
 import EnciclopediaPR from '../assets/EnciclopediaPR.png';
 import RobertoClemente from '../assets/RobertoClemente.jpg';
 
@@ -180,11 +177,9 @@ const Questions: React.FC = () => {
 
             <IonFooter>
                 <IonToolbar>
-                    <IonNavLink routerDirection="forward" component={() => <Biography />}>
-                        <IonTabButton tab="Biography" href="/Biography">
-                            <IonIcon icon={arrowBack} />
-                        </IonTabButton>
-                    </IonNavLink>
+                    <IonButtons slot="start">
+                        <IonBackButton defaultHref="/ListBiographie"></IonBackButton>
+                    </IonButtons>
                 </IonToolbar>
             </IonFooter>
         </IonPage>